a noon start, copied from examples

Gemfile

@@ -1,40 +1,13 @@
 source 'https://rubygems.org'
 
-gem 'volt', :path => "../volt"
+gem 'opal-react', :path => '../react.rb'
-
+gem 'opal-browser'
-# volt uses mongo as the default data store.
+gem 'sinatra'
-gem 'volt-mongo', '~> 0.1.0'
+gem 'opal-jquery'
-
+gem 'react-source'
-# The following gem's are optional for themeing
-# Twitter bootstrap
-gem 'volt-bootstrap', '~> 0.0.10'
-
-# Asset compilation gems, they will be required when needed.
-gem 'csso-rails', '~> 0.3.4', require: false
-gem 'uglifier', '>= 2.4.0', require: false
 
 gem "parslet" , path: "../parslet"
-#gem "salama" , path: "../salama"
+gem "salama" , path: "../salama"
 gem "salama-reader" , path: "../salama-reader"
+gem "salama-arm" , path: "../salama-arm"
 gem "salama-object-file" , path: "../salama-object-file"
-
-
-group :test do
-  # Testing dependencies
-  gem 'rspec', '~> 3.2.0'
-  gem 'opal-rspec', '~> 0.4.2'
-  gem 'capybara', '~> 2.4.2'
-  gem 'selenium-webdriver', '~> 2.43.0'
-  gem 'chromedriver2-helper', '~> 0.0.8'
-  gem 'poltergeist', '~> 1.5.0'
-end
-
-# Server for MRI
-platform :mri, :mingw do
-  # The implementation of ReadWriteLock in Volt uses concurrent ruby and ext helps performance.
-  gem 'concurrent-ruby-ext', '~> 0.8.0'
-
-  # Thin is the default volt server, Puma is also supported
-  gem 'thin', '~> 1.6.0'
-  gem 'bson_ext', '~> 1.9.0'
-end

Gemfile.lock

@@ -3,6 +3,25 @@ PATH
   specs:
     parslet (1.7.0)
 
+PATH
+  remote: ../react.rb
+  specs:
+    opal-react (0.1.1)
+      opal
+      opal-activesupport
+
+PATH
+  remote: ../salama
+  specs:
+    salama (0.2.0)
+      salama-object-file (~> 0.2)
+      salama-reader (~> 0.2)
+
+PATH
+  remote: ../salama-arm
+  specs:
+    salama-arm (0.0.1)
+
 PATH
   remote: ../salama-object-file
   specs:
@@ -14,160 +33,50 @@ PATH
     salama-reader (0.2.0)
       parslet (~> 1.7.0)
 
-PATH
-  remote: ../volt
-  specs:
-    volt (0.9.4)
-      bcrypt (~> 3.1.9)
-      bundler (>= 1.5)
-      concurrent-ruby (= 0.8.0)
-      configurations (~> 2.0.0.pre)
-      faye-websocket (~> 0.9.2)
-      listen (~> 3.0.1)
-      opal (~> 0.7.2)
-      pry (~> 0.10.1)
-      rack (~> 1.5.0)
-      sass (~> 3.2.5)
-      sprockets-sass (~> 1.0.0)
-      thor (~> 0.19.0)
-
 GEM
   remote: https://rubygems.org/
   specs:
-    bcrypt (3.1.10)
-    bson (1.9.2)
-    bson_ext (1.9.2)
-      bson (~> 1.9.2)
-    capybara (2.4.4)
-      mime-types (>= 1.16)
-      nokogiri (>= 1.3.3)
-      rack (>= 1.0.0)
-      rack-test (>= 0.5.4)
-      xpath (~> 2.0)
-    childprocess (0.5.6)
-      ffi (~> 1.0, >= 1.0.11)
-    chromedriver2-helper (0.0.8)
-      nokogiri
-    cliver (0.3.2)
-    coderay (1.1.0)
-    concurrent-ruby (0.8.0)
-      ref (~> 1.0, >= 1.0.5)
-    concurrent-ruby-ext (0.8.0)
-      concurrent-ruby (~> 0.8.0)
-    configurations (2.0.0)
-    csso-rails (0.3.4)
-      execjs (>= 1)
-    daemons (1.2.3)
-    diff-lcs (1.2.5)
-    eventmachine (1.0.7)
-    execjs (2.5.2)
-    faye-websocket (0.9.2)
-      eventmachine (>= 0.12.0)
-      websocket-driver (>= 0.5.1)
-    ffi (1.9.10)
     hike (1.2.3)
-    json (1.8.3)
+    opal (0.8.0)
-    listen (3.0.2)
-      rb-fsevent (>= 0.9.3)
-      rb-inotify (>= 0.9)
-    method_source (0.8.2)
-    mime-types (2.6.1)
-    mini_portile (0.6.2)
-    mongo (1.9.2)
-      bson (~> 1.9.2)
-    multi_json (1.11.2)
-    nokogiri (1.6.6.2)
-      mini_portile (~> 0.6.0)
-    opal (0.7.2)
       hike (~> 1.2)
       sourcemap (~> 0.1.0)
-      sprockets (>= 2.2.3, < 3.0.0)
+      sprockets (~> 3.1)
-      tilt (~> 1.4)
+      tilt (>= 1.4)
-    opal-rspec (0.4.3)
+    opal-activesupport (0.1.0)
-      opal (>= 0.7.0, < 0.9)
+      opal (>= 0.5.0, < 1.0.0)
-    poltergeist (1.5.1)
+    opal-browser (0.1.0.beta1)
-      capybara (~> 2.1)
+      opal (>= 0.5.5)
-      cliver (~> 0.3.1)
+      paggio
-      multi_json (~> 1.0)
+    opal-jquery (0.4.0)
-      websocket-driver (>= 0.2.0)
+      opal (>= 0.7.0, < 0.9.0)
-    pry (0.10.1)
+    paggio (0.2.4)
-      coderay (~> 1.1.0)
+    rack (1.6.4)
-      method_source (~> 0.8.1)
+    rack-protection (1.5.3)
-      slop (~> 3.4)
+      rack
-    rack (1.5.5)
+    react-source (0.13.3)
-    rack-test (0.6.3)
+    sinatra (1.4.6)
-      rack (>= 1.0)
+      rack (~> 1.4)
-    rb-fsevent (0.9.5)
+      rack-protection (~> 1.4)
-    rb-inotify (0.9.5)
+      tilt (>= 1.3, < 3)
-      ffi (>= 0.5.0)
-    ref (1.0.5)
-    rspec (3.2.0)
-      rspec-core (~> 3.2.0)
-      rspec-expectations (~> 3.2.0)
-      rspec-mocks (~> 3.2.0)
-    rspec-core (3.2.3)
-      rspec-support (~> 3.2.0)
-    rspec-expectations (3.2.1)
-      diff-lcs (>= 1.2.0, < 2.0)
-      rspec-support (~> 3.2.0)
-    rspec-mocks (3.2.1)
-      diff-lcs (>= 1.2.0, < 2.0)
-      rspec-support (~> 3.2.0)
-    rspec-support (3.2.2)
-    rubyzip (1.1.7)
-    sass (3.2.19)
-    selenium-webdriver (2.43.0)
-      childprocess (~> 0.5)
-      multi_json (~> 1.0)
-      rubyzip (~> 1.0)
-      websocket (~> 1.0)
-    slop (3.6.0)
     sourcemap (0.1.1)
-    sprockets (2.12.4)
+    sprockets (3.2.0)
-      hike (~> 1.2)
-      multi_json (~> 1.0)
       rack (~> 1.0)
-      tilt (~> 1.1, != 1.3.0)
+    tilt (2.0.1)
-    sprockets-sass (1.0.3)
-      sprockets (~> 2.0)
-      tilt (~> 1.1)
-    thin (1.6.3)
-      daemons (~> 1.0, >= 1.0.9)
-      eventmachine (~> 1.0)
-      rack (~> 1.0)
-    thor (0.19.1)
-    tilt (1.4.1)
-    uglifier (2.7.1)
-      execjs (>= 0.3.0)
-      json (>= 1.8.0)
-    volt-bootstrap (0.0.10)
-    volt-mongo (0.1.1)
-      mongo (~> 1.9.0)
-    websocket (1.2.2)
-    websocket-driver (0.5.4)
-      websocket-extensions (>= 0.1.0)
-    websocket-extensions (0.1.2)
-    xpath (2.0.0)
-      nokogiri (~> 1.3)
 
 PLATFORMS
   ruby
 
 DEPENDENCIES
-  bson_ext (~> 1.9.0)
+  opal-browser
-  capybara (~> 2.4.2)
+  opal-jquery
-  chromedriver2-helper (~> 0.0.8)
+  opal-react!
-  concurrent-ruby-ext (~> 0.8.0)
-  csso-rails (~> 0.3.4)
-  opal-rspec (~> 0.4.2)
   parslet!
-  poltergeist (~> 1.5.0)
+  react-source
-  rspec (~> 3.2.0)
+  salama!
+  salama-arm!
   salama-object-file!
   salama-reader!
-  selenium-webdriver (~> 2.43.0)
+  sinatra
-  thin (~> 1.6.0)
+
-  uglifier (>= 2.4.0)
+BUNDLED WITH
-  volt!
+   1.10.5
-  volt-bootstrap (~> 0.0.10)
-  volt-mongo (~> 0.1.0)

config.ru

@@ -1,4 +1,46 @@
-# Run via rack server
+# config.ru
-require 'bundler/setup'
+require 'bundler'
-require 'volt/server'
+Bundler.require
-run Volt::Server.new.app
+
+require "react/source"
+
+
+opal = Opal::Server.new {|s|
+  s.append_path './'
+  s.append_path File.dirname(::React::Source.bundled_path_for("react-with-addons.js"))
+  s.main = 'debuger'
+  s.debug = true
+  s.source_map = true
+}
+
+map '/assets' do
+  run opal.sprockets
+end
+
+
+post "/parse.json" do
+
+#  File.write('./parse.json', JSON.pretty_generate(comments, :indent => '    '))
+#  JSON.generate(comments)
+end
+
+get '/' do
+  <<-HTML
+    <!doctype html>
+    <html>
+      <head>
+        <title>Salama Debugger</title>
+        <link rel="stylesheet" href="base.css" />
+        <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
+        <script src="/assets/react-with-addons.js"></script>
+        <script src="/assets/debugger.js"></script>
+        <script>#{Opal::Processor.load_asset_code(opal.sprockets, "debugger.js")}</script>
+      </head>
+      <body>
+        <div id="content"></div>
+      </body>
+    </html>
+  HTML
+end
+
+run Sinatra::Application

debugger.rb

@@ -0,0 +1,97 @@
+require 'opal'
+require 'browser'
+require 'opal-jquery'
+require "json"
+require 'opal-react'
+
+Document.ready? do  # Document.ready? is a opal-jquery method.  The block will run when doc is loaded
+
+  React.render( React.create_element( Debugger),  Element['#content']    )
+end
+
+class Debugger
+
+  include React::Component
+#  required_param :url
+  define_state sources: JSON.from_object(`window.initial_sources`)
+
+  # before_mount do
+  #   HTTP.get(url) do |response|
+  #     if response.ok?
+  #       sources! JSON.parse(response.body)
+  #     else
+  #       puts "failed with status #{response.status_code}"
+  #     end
+  #   end
+  # end
+
+  def render
+    div class: "sourceBox" do
+      h1 { "Sources" }
+      ClassView sources: sources
+      RegisterView submit_source: lambda { |source| sources! << sourceAuthor}
+    end
+  end
+end
+
+class ClassView
+
+  include React::Component
+
+  required_param :sources, type: [Hash]
+
+  def render
+    div class: "sourceList" do
+      sources.each do |source|
+        Source author: source[:author], text: source[:text]
+      end
+    end
+  end
+
+end
+
+class RegisterView
+
+  include React::Component
+  required_param :submit_source, type: Proc
+
+  define_state :author, :text
+
+  def render
+    div do
+      div do
+        "Author: ".span
+        input(type: :text, value: author, placeholder: "Your name", style: {width: "30%"}).
+          on(:change) { |e| author! e.target.value }
+      end
+      div do
+        div(style: {float: :left, width: "50%"}) do
+          textarea(value: text, placeholder: "Say something...", style: {width: "90%"}, rows: 10).
+            on(:change) { |e| text! e.target.value }
+        end
+        div(style: {float: :left, width: "50%"}) do
+          text
+        end
+      end
+      button { "Post" }.on(:click) { submit_source :author => (author! ""), :text => (text! "") }
+    end
+  end
+end
+
+class Source
+
+  include React::Component
+
+  required_param :author
+  required_param :text
+
+  def render
+    div class: "source" do
+      h2(class: "sourceAuthor") { author }
+      div do
+        text
+      end
+    end
+  end
+
+end