RubyGems - reactive-ruby - Versions diffs - 0.7.3 - Mend

reactive-ruby 0.7.3

Files changed (69) hide show

checksums.yaml +7 -0
data/.gitignore +30 -0
data/Gemfile +3 -0
data/Gemfile.lock +53 -0
data/LICENSE +19 -0
data/README.md +303 -0
data/config.ru +15 -0
data/example/examples/Gemfile +7 -0
data/example/examples/Gemfile.lock +45 -0
data/example/examples/config.ru +44 -0
data/example/examples/hello.js.rb +43 -0
data/example/react-tutorial/Gemfile +7 -0
data/example/react-tutorial/Gemfile.lock +49 -0
data/example/react-tutorial/README.md +8 -0
data/example/react-tutorial/_comments.json +14 -0
data/example/react-tutorial/config.ru +63 -0
data/example/react-tutorial/example.js.rb +290 -0
data/example/react-tutorial/public/base.css +62 -0
data/example/todos/Gemfile +11 -0
data/example/todos/Gemfile.lock +84 -0
data/example/todos/README.md +37 -0
data/example/todos/Rakefile +8 -0
data/example/todos/app/application.rb +22 -0
data/example/todos/app/components/app.react.rb +61 -0
data/example/todos/app/components/footer.react.rb +31 -0
data/example/todos/app/components/todo_item.react.rb +46 -0
data/example/todos/app/components/todo_list.react.rb +25 -0
data/example/todos/app/models/todo.rb +19 -0
data/example/todos/config.ru +14 -0
data/example/todos/index.html.haml +16 -0
data/example/todos/spec/todo_spec.rb +28 -0
data/example/todos/vendor/base.css +410 -0
data/example/todos/vendor/bg.png +0 -0
data/example/todos/vendor/jquery.js +4 -0
data/lib/rails-helpers/react_component.rb +32 -0
data/lib/reactive-ruby.rb +23 -0
data/lib/reactive-ruby/api.rb +177 -0
data/lib/reactive-ruby/callbacks.rb +35 -0
data/lib/reactive-ruby/component.rb +411 -0
data/lib/reactive-ruby/element.rb +87 -0
data/lib/reactive-ruby/event.rb +76 -0
data/lib/reactive-ruby/ext/hash.rb +9 -0
data/lib/reactive-ruby/ext/string.rb +8 -0
data/lib/reactive-ruby/isomorphic_helpers.rb +223 -0
data/lib/reactive-ruby/observable.rb +33 -0
data/lib/reactive-ruby/rendering_context.rb +91 -0
data/lib/reactive-ruby/serializers.rb +15 -0
data/lib/reactive-ruby/state.rb +90 -0
data/lib/reactive-ruby/top_level.rb +53 -0
data/lib/reactive-ruby/validator.rb +83 -0
data/lib/reactive-ruby/version.rb +3 -0
data/logo1.png +0 -0
data/logo2.png +0 -0
data/logo3.png +0 -0
data/reactive-ruby.gemspec +25 -0
data/spec/callbacks_spec.rb +107 -0
data/spec/component_spec.rb +597 -0
data/spec/element_spec.rb +60 -0
data/spec/event_spec.rb +22 -0
data/spec/react_spec.rb +209 -0
data/spec/reactjs/index.html.erb +11 -0
data/spec/spec_helper.rb +29 -0
data/spec/tutorial/tutorial_spec.rb +37 -0
data/spec/validator_spec.rb +79 -0
data/vendor/active_support/core_ext/array/extract_options.rb +29 -0
data/vendor/active_support/core_ext/class/attribute.rb +127 -0
data/vendor/active_support/core_ext/kernel/singleton_class.rb +13 -0
data/vendor/active_support/core_ext/module/remove_method.rb +11 -0
metadata +205 -0

data/example/examples/Gemfile.lock ADDED Viewed

@@ -0,0 +1,45 @@
+PATH
+  remote: ../..
+  specs:
+    opal-react (0.1.1)
+      opal
+      opal-activesupport
+GEM
+  remote: http://rubygems.org/
+  specs:
+    hike (1.2.3)
+    opal (0.8.0)
+      hike (~> 1.2)
+      sourcemap (~> 0.1.0)
+      sprockets (~> 3.1)
+      tilt (>= 1.4)
+    opal-activesupport (0.1.0)
+      opal (>= 0.5.0, < 1.0.0)
+    opal-jquery (0.4.0)
+      opal (>= 0.7.0, < 0.9.0)
+    rack (1.6.4)
+    rack-protection (1.5.3)
+      rack
+    react-source (0.13.3)
+    sinatra (1.4.6)
+      rack (~> 1.4)
+      rack-protection (~> 1.4)
+      tilt (>= 1.3, < 3)
+    sourcemap (0.1.1)
+    sprockets (3.2.0)
+      rack (~> 1.0)
+    tilt (2.0.1)
+PLATFORMS
+  ruby
+DEPENDENCIES
+  opal
+  opal-jquery
+  opal-react!
+  react-source
+  sinatra
+BUNDLED WITH
+   1.10.2

data/example/examples/config.ru ADDED Viewed

@@ -0,0 +1,44 @@
+# config.ru
+require 'bundler'
+Bundler.require
+require "react/source"
+Opal::Processor.source_map_enabled = true
+opal = Opal::Server.new {|s|
+  s.append_path './'
+  s.append_path File.dirname(::React::Source.bundled_path_for("react-with-addons.js"))
+  s.main = 'example'
+  s.debug = true
+}
+map opal.source_maps.prefix do
+  run opal.source_maps
+end rescue nil
+map '/assets' do
+  run opal.sprockets
+end
+get '/example/:example' do
+  example = params[:example]
+  <<-HTML
+    <!doctype html>
+    <html>
+      <head>
+        <title>Example: #{example}.rb</title>
+        <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
+        <script src="http://cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js"></script>
+        <script src="/assets/react-with-addons.min.js"></script>
+        <script src="/assets/#{example}.js"></script>
+        <script>#{Opal::Processor.load_asset_code(opal.sprockets, example+".js")}</script>
+      </head>
+      <body>
+        <div id="content"></div>
+      </body>
+    </html>
+  HTML
+end
+run Sinatra::Application

data/example/examples/hello.js.rb ADDED Viewed

@@ -0,0 +1,43 @@
+require 'opal'
+require 'opal-react'
+class HelloMessage
+  include React::Component                    # will create a new component named HelloMessage
+  MSG = {great: 'Cool!', bad: 'Cheer up!'}
+  optional_param :mood
+  required_param :name
+  define_state   :foo, "Default greeting"
+  before_mount do
+    foo! "#{name}: #{MSG[mood]}" if mood      # change the state of foo using foo!, read the state using foo
+  end
+  after_mount :log                            # notice the two forms of callback
+  def log
+    puts "mounted!"
+  end
+  def render                                  # render method MUST return just one component
+    div do                                    # basic dsl syntax component_name(options) { ...children... }
+      span { "#{foo} #{name}!" }              # all html5 components are defined with lower case text
+    end
+  end
+end
+class App
+  include React::Component
+  def render
+    HelloMessage name: 'John', mood: :great   # new components are accessed via the class name
+  end
+end
+# later we will talk about nicer ways to do this:  For now wait till doc is loaded
+# then tell React to create an "App" and render it into the document body.
+`window.onload = #{lambda {React.render(React.create_element(App), `document.body`)}}`

data/example/react-tutorial/Gemfile ADDED Viewed

@@ -0,0 +1,7 @@
+source 'https://rubygems.org'
+gem 'opal-react', :path => '../..'
+gem 'opal-browser'
+gem 'sinatra'
+gem 'opal-jquery'
+gem 'react-source'

data/example/react-tutorial/Gemfile.lock ADDED Viewed

@@ -0,0 +1,49 @@
+PATH
+  remote: ../..
+  specs:
+    opal-react (0.2.1)
+      opal
+      opal-activesupport
+GEM
+  remote: https://rubygems.org/
+  specs:
+    hike (1.2.3)
+    opal (0.8.0)
+      hike (~> 1.2)
+      sourcemap (~> 0.1.0)
+      sprockets (~> 3.1)
+      tilt (>= 1.4)
+    opal-activesupport (0.1.0)
+      opal (>= 0.5.0, < 1.0.0)
+    opal-browser (0.1.0.beta1)
+      opal (>= 0.5.5)
+      paggio
+    opal-jquery (0.4.0)
+      opal (>= 0.7.0, < 0.9.0)
+    paggio (0.2.4)
+    rack (1.6.4)
+    rack-protection (1.5.3)
+      rack
+    react-source (0.13.3)
+    sinatra (1.4.6)
+      rack (~> 1.4)
+      rack-protection (~> 1.4)
+      tilt (>= 1.3, < 3)
+    sourcemap (0.1.1)
+    sprockets (3.2.0)
+      rack (~> 1.0)
+    tilt (2.0.1)
+PLATFORMS
+  ruby
+DEPENDENCIES
+  opal-browser
+  opal-jquery
+  opal-react!
+  react-source
+  sinatra
+BUNDLED WITH
+   1.10.2

data/example/react-tutorial/README.md ADDED Viewed

@@ -0,0 +1,8 @@
+# React Tutorial
+This is a rewrite of original comment box example using React.rb from the [React tutorial](http://facebook.github.io/react/docs/tutorial.html).
+## To use
+1. Make sure you use Bundler, then `bundle exec rackup`
+2. And visit <http://localhost:9292/>. Try opening multiple tabs!

data/example/react-tutorial/_comments.json ADDED Viewed

@@ -0,0 +1,14 @@
+[
+    {
+        "author": "Pete Hunt",
+        "text": "Hey there!"
+    },
+    {
+        "author": "Mitch",
+        "text": "i ***am*** saying something!"
+    },
+    {
+        "author": "Jan",
+        "text": "well what are you saying *dear*"
+    }
+]

data/example/react-tutorial/config.ru ADDED Viewed

@@ -0,0 +1,63 @@
+# config.ru
+require 'bundler'
+Bundler.require
+require "react/source"
+Opal::Processor.source_map_enabled = true
+opal = Opal::Server.new {|s|
+  s.append_path './'
+  s.append_path File.dirname(::React::Source.bundled_path_for("react-with-addons.js"))
+  s.main = 'example'
+  s.debug = true
+}
+map opal.source_maps.prefix do
+  run opal.source_maps
+end rescue nil
+map '/assets' do
+  run opal.sprockets
+end
+get '/comments.json' do
+  comments = JSON.parse(open("./_comments.json").read)
+  JSON.generate(comments)
+end
+get '/comments.js' do
+  content_type "application/javascript"
+  comments = JSON.parse(open("./_comments.json").read)
+  "window.initial_comments = #{JSON.generate(comments)}"
+end
+post "/comments.json" do
+  comments = JSON.parse(open("./_comments.json").read)
+  comments << JSON.parse(request.body.read)
+  File.write('./_comments.json', JSON.pretty_generate(comments, :indent => '    '))
+  JSON.generate(comments)
+end
+get '/' do
+  <<-HTML
+    <!doctype html>
+    <html>
+      <head>
+        <title>Hello React</title>
+        <link rel="stylesheet" href="base.css" />
+        <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
+        <script src="http://cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js"></script>
+        <script src="/assets/react-with-addons.js"></script>
+        <script src="/assets/example.js"></script>
+        <script src="/comments.js"></script>
+        <script>#{Opal::Processor.load_asset_code(opal.sprockets, "example.js")}</script>
+      </head>
+      <body>
+        <div id="content"></div>
+      </body>
+    </html>
+  HTML
+end
+run Sinatra::Application

data/example/react-tutorial/example.js.rb ADDED Viewed

@@ -0,0 +1,290 @@
+require 'opal'
+require 'browser'      # gives us wrappers on javascript methods such as setTimer and setInterval
+require 'opal-jquery'  # gives us a nice wrapper on jQuery which we will use mainly for HTTP calls
+require "json"         # json conversions
+require 'opal-react'   # and the whole reason we are gathered here today!
+Document.ready? do  # Document.ready? is a opal-jquery method.  The block will run when doc is loaded
+  # render an instance of the CommentBox component at the '#content' element.
+  # url and poll_interval are the initial params for this comment box
+  React.render(
+    React.create_element(
+      CommentBox, url: "comments.json", poll_interval: 2),
+    Element['#content']
+    )
+end
+class CommentBox
+  # A react component is simply a class that has a "render" method.
+  # But including React::Component mixin provides a nice dsl, and many other features
+  include React::Component
+  # Components can have parameters that are passed in when the component is first "mounted"
+  # and then updated as the application state changes.  In this case url, and poll_interval will
+  # never change since this is the top level component.
+  required_param :url
+  required_param :poll_interval
+  # Components also may have internal state variables, which are like instance variables,
+  # with one added feature:  Changing state causes a rerender to occur.
+  # The "comments" state is being initialized by parsing the javascript object at window.initial_comments
+  # This is not a react feature, but was just set up in the HTML header (see config.ru for how this was done).
+  define_state comments: JSON.from_object(`window.initial_comments`)
+  # The following call backs are made during the component lifecycle:
+  # before_mount          before component is first rendered
+  # after_mount           after component is first rendered, after DOM is loaded.  ONLY CALLED ON CLIENT
+  # before_receive_props  when component is being about to be rerendered by an outside state change.  CANCELLABLE
+  # before_update         just before a rerender, and not cancellable.
+  # after_update          after DOM has been updated.
+  # before_unmount        before component instance will be removed.  Use this to kill low level handlers etc.
+  # just to show off how these callbacks work we have separated setting up a repeating fetch into three pieces.
+  # before mounting we will initialize a polling loop, but we don't want to start it yet.
+  before_mount do
+    @fetcher = every(poll_interval) do          # we use the opal browser utility to call the server every poll_interval seconds
+      HTTP.get(url) do |response|               # notice that params poll_interval, and url are accessed as instance methods
+        if response.ok?
+          comments! JSON.parse(response.body)   # comments!(value) updates the state and notifies react of the state change
+        else
+          puts "failed with status #{response.status_code}"
+        end
+      end
+    end
+  end
+  # once we have things up and displayed lets start polling for updates
+  after_mount do
+    puts "start me up!"
+    @fetcher.start
+  end
+  # finally our component should be a good citizen and stop the polling when its unmounted
+  before_unmount do
+    @fetcher.stop
+  end
+  # components can have their own methods like any other class
+  # in this case we receive a new comment and send it the server
+  def send_comment_to_server(comment)
+    HTTP.post(url, payload: comment) do |response|
+      puts "failed with status #{response.status_code}" unless response.ok?
+    end
+    comment
+  end
+  # every component must implement a render method.  The method must generate a single
+  # react virtual DOM element.  React compares the output of each render and determines
+  # the minimum actual DOM update needed.
+  # A very common mistake is to try generate two or more elements (or none at all.) Either case will
+  # throw an error.  Just remember that there is already a DOM node waiting for the output of the render
+  # hence the need for exactly one element per render.
+  def render
+    # the dsl syntax is simply a method call, with params hash, followed by a block
+    # the built in dsl methods correspond to the standard HTML5 tags such as div, h1, table, tr, td, span etc.
+    #return div.comment { h1 {"hello"} }
+    div class: "commentBox" do          # just like <div class="commentBox">
+      h1 { "Comments" }                 # yep just like <h1>Comments</h1>
+      # Custom components use their class name, as the tag.  Notice that the comments state is passed to
+      # to the CommentList component.  This is the normal React paradigm: Data flows towards the leaf nodes.
+      CommentList comments: comments
+      # Sometimes its necessary for data to move upwards, and react provides several ways to do this.
+      # In this case we need to know when a new comment is submitted. So we pass a callback proc.
+      # The callback takes the new comment and sends it to the server and then pushes it onto the comments list.
+      # Again the comments! method is used to signal that the state is changing.  The use of the "bang" pseudo
+      # operator is important as the value of comments has NOT changed (its still tha same array), but its
+      # internal state has.
+      CommentForm submit_comment: lambda { |comment| comments! << send_comment_to_server(comment)}
+    end
+  end
+end
+# Our second component!
+class CommentList
+  include React::Component
+  # As we saw above a CommentList component takes a comments parameter
+  # Here we introduce optional parameter type checking.  The syntax [Hash] means "Array of Hashes"
+  # In our case each comment is a hash with an author and text key.
+  # Failure to match the type puts a warning on the console not an error,
+  # and only in development mode not production.
+  required_param :comments, type: Array
+  # This is a good place to think more about the component lifecycle.  The first time
+  # CommentList is mounted, comments will be the initial array of author, text hashes.
+  # As new comments are added the component will receive new params.  However the component
+  # does NOT reinitialize its state.  If changes in state are needed as result of incoming param changes
+  # the before_receive_props call back can be used.
+  def render
+    # Lets render some comments - all we need to do is iterate over the comments array using the usual
+    # ruby "each" method.
+    # This is a good place to clarify how the DSL works.  Notice that we use comments.each NOT comments.collect
+    # When a tag method (such as div, or Comment) is called its "output" is internally pushed into a render buffer.
+    # This simplifies the DSL by separating the control flow from the output, but can sometimes be a bit confusing.
+    div.commentList.and_another_class.and_another do   # you can also include the class haml style (tx to @dancinglightning!)
+      comments.each do |comment|
+        # By now we are getting used to the react paradigm:  Stuff comes in, is processed, and then
+        # passed to next lower level.  In this case we pass along each author-text pair to the Comment component.
+        Comment author: comment[:author], text: comment[:text], hash: comment
+      end
+    end
+  end
+end
+# Notice that the above CommentList component had no state.  Each time its parameters change, it simply re-renders.
+# CommentForm does have internal state as we will see...
+class CommentForm
+  include React::Component
+  # While declaring the type of a param is optional its handy not only for debug, but also to let React create
+  # appropriate helpers based on the type.  In this case we are passing in a Proc, and so React will treat the
+  # "submit_comment" param specially.  Instead of submit_comment returning its value (as the previous params have done)
+  # it will call the associated Proc, thus allow CommentForm to communicate state changes back to the parent.
+  required_param :submit_comment, type: Proc
+  # We are going to have 2 state variable.  One for each field in the comment.  As the user types,
+  # these state variables will be updating causing a rerender of the CommentForm (but no other components.)
+  define_state :author, :text
+  def render
+    div do
+      div do
+        "Author: ".span  # Note the shorthand for span { "Author" }. You can do this with br, span, th, td, and para (for p) tags
+        # Now we are going to generate an input tag.  Notice how the author state variable is provided. Referencing
+        # author is what will cause us to re-render and update the input as the value of author changes.
+        # React will optimize the updates so parts that are not changing will not be effected.
+        input.author_name(type: :text, value: author, placeholder: "Your name", style: {width: "30%"}).
+          # and we attach an on_change handler to the input.  As the input changes we simply update author.
+          on(:change) { |e| author! e.target.value }
+      end
+      div do
+        # lets have some fun with the text.  Same deal as the author except we will use a text area...
+        div(style: {float: :left, width: "50%"}) do
+          textarea(value: text, placeholder: "Say something...", style: {width: "90%"}, rows: 30).
+            on(:change) { |e| text! e.target.value }
+        end
+        # and lets use Showdown to allow for markdown, and display the mark down to the left of input
+        # we will define Showdown later, and it will be our first reusable component, as we will use it twice.
+        div(style: {float: :left, width: "50%"}) do
+          Showdown markup: text
+        end
+      end
+      # Finally lets give the use a button to submit changes.  Why not? We have come this far!
+      # Notice how the submit_comment proc param allows us to be ignorant of how the update is made.
+      # Notice that (author! "") updates author, but returns the current value.
+      # This is usually the desired behavior in React as we are typically interested in state changes,
+      # and before/after values, not simply doing a chained update of multiple variables.
+      button { "Post" }.on(:click) { submit_comment :author => (author! ""), :text => (text! "") }
+    end
+  end
+end
+# Wow only two more components left!  This one is a breeze.  We just take the author, and text and display
+# them.  We already know how to use our Showdown component to display the markdown so we can just reuse that.
+class Comment
+  include React::Component
+  required_param :author
+  required_param :text
+  required_param :hash, type: Hash
+  def render
+    div.comment do
+      h2.comment_author { author } # NOTE: single underscores in haml style class names are converted to dashes
+                                   # so comment_author becomes comment-author, but comment__author would be comment_author
+                                   # this is handy for boot strap names like col-md-push-9 which can be written as col_md_push_9
+      Showdown markup: text
+    end
+  end
+end
+# Last but not least here is our ShowDown Component
+class Showdown
+  include React::Component
+  required_param :markup
+  def render
+    # we will use some Opal lowlevel stuff to interface to the javascript Showdown class
+    # we only need to build the converter once, and then reuse it so we will use a plain old
+    # instance variable to keep track of it.
+    @converter ||= Native(`new Showdown.converter()`)
+    # then we will take our markup param, and convert it to html
+    raw_markup = @converter.makeHtml(markup) if markup
+    # React.js takes a very dim view of passing raw html so its purposefully made
+    # difficult so you won't do it by accident.  After all think of how dangerous what we
+    # are doing right here is!
+    # The span tag can be replaced by any tag that could sensibly take a child html element.
+    # You could also use div, td, etc.
+    span(dangerously_set_inner_HTML: {__html: raw_markup})
+  end
+end