react_on_rails 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: f3d6a3770f22b5c124f17556203f1b1a74fd550b
+  data.tar.gz: 779c9ccbca94e36754c0fa90d60ab12aa8bf4785
+SHA512:
+  metadata.gz: 47688d10f95c09bc2b9dcdb86744319c9e15b071d7c10de1c204c3a1815b793089ef2da7699a15a4bb7f314796e8d8dd7f608bdc43bc401497e2f9e61d239806
+  data.tar.gz: 5701bc9218429a92987a9160de14cd37a8965b5298bc2535eb632adb1639087afde627136a7a11f938bfa7cfa898b89631094f334dd25b5bb29a34ae5365c61a

data/.gitignore

@@ -0,0 +1,17 @@
+/.bundle/
+/.yardoc
+/Gemfile.lock
+/_yardoc/
+/coverage/
+/doc/
+/pkg/
+/spec/reports/
+/tmp/
+
+
+/spec/dummy/client/node_modules
+/spec/dummy/app/assets/javascripts/generated/
+
+# RVM
+.ruby-version
+.ruby-gemset

data/.rspec

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

data/.travis.yml

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

data/CODE_OF_CONDUCT.md

@@ -0,0 +1,13 @@
+# Contributor Code of Conduct
+
+As contributors and maintainers of this project, we pledge to respect all people who contribute through reporting issues, posting feature requests, updating documentation, submitting pull requests or patches, and other activities.
+
+We are committed to making participation in this project a harassment-free experience for everyone, regardless of level of experience, gender, gender identity and expression, sexual orientation, disability, personal appearance, body size, race, ethnicity, age, or religion.
+
+Examples of unacceptable behavior by participants include the use of sexual language or imagery, derogatory comments or personal attacks, trolling, public or private harassment, insults, or other unprofessional conduct.
+
+Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct. Project maintainers who do not follow the Code of Conduct may be removed from the project team.
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by opening an issue or contacting one or more of the project maintainers.
+
+This Code of Conduct is adapted from the [Contributor Covenant](http://contributor-covenant.org), version 1.0.0, available at [http://contributor-covenant.org/version/1/0/0/](http://contributor-covenant.org/version/1/0/0/)

data/Gemfile

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

data/LICENSE.txt

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2015 Justin Gordon
+
+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,106 @@
+# ReactOnRails
+
+Published: https://rubygems.org/gems/react_on_rails
+
+Supports:
+
+1. Rails
+2. Webpack
+3. React
+4. Redux
+5. Turbolinks
+6. Server side rendering with fragment caching
+
+# Authors
+The Shaka Code team!
+
+1. [Justin Gordon](https://github.com/justin808/)
+2. [Samnang Chhun](https://github.com/samnang)
+3. [Alex Fedoseev](https://github.com/alexfedoseev)
+
+And based on the work of the [react-rails gem](https://github.com/reactjs/react-rails)
+
+# Key Info
+Currently in proof of concept phase.
+
+1. https://github.com/justin808/react-webpack-rails-tutorial/
+2. http://www.railsonmaui.com/blog/2014/10/03/integrating-webpack-and-the-es6-transpiler-into-an-existing-rails-project/
+3. http://forum.railsonmaui.com
+4. Lots of work to do in terms of docs, tests
+5. If this project is interesting to you, email me at justin@shakacode.com. We're looking for great
+developers that want to work with Rails + React with a distributed, worldwide team.
+
+
+# Try it out!
+Contributions and pull requests welcome!
+
+1. Setup and run the test app. There's no database.
+  ```bash
+  cd spec/dummy
+  bundle
+  npm i
+  foreman start 
+  ``` 
+2. Caching is turned for development mode. Open the console and run `Rails.cache.clear` to clear
+  the cache. Note, even if you stop the server, you'll still have the cache entries around.
+3. Visit http://localhost:3000
+4. Notice that the first time you hit the page, you'll see a message that server is rendering.
+   See `spec/dummy/app/views/pages/index.html.erb:17` for the generation of that message.
+5. Open up the browser console and see some tracing.
+6. Open up the source for the page and see the server rendered code.
+7. If you want to turn off server caching, run the server like: 
+   `export RAILS_USE_CACHE=N && foreman start`
+8. If you click back and forth between the about and react page links, you can see the rails console
+   log as well as the browser console to see what's going on with regards to server rendering and
+   caching.
+
+# Key Tips
+1. See sample app in `spec/dummy` for how to set this up. 
+2. The file used for server rendering is hard coded as generated/server.js
+   (assets/javascripts/generated/server.js)
+3. The default for rendering right now is `prerender: true`. **NOTE:** This does not work for
+   components, namely react-router, that use an async setup for server rendering.
+4. The API for objects exposed differs from the react-rails gem in that you expose a function that
+   returns a react component. We'll be changing that to take either a function or a React component.
+
+## References
+* [Making the helper for server side rendering work with JS created by Webpack] (https://github.com/reactjs/react-rails/issues/301#issuecomment-133098974)
+* [Add Demonstration of Server Side Rendering](https://github.com/justin808/react-webpack-rails-tutorial/issues/2)
+* [Charlie Marsh's article "Rendering React Components on the Server"](http://www.crmarsh.com/react-ssr/)
+* [Node globals](https://nodejs.org/api/globals.html#globals_global)
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+```ruby
+gem 'react_on_rails'
+```
+
+And then execute:
+
+    $ bundle
+
+Or install it yourself as:
+
+    $ gem install react_on_rails
+
+## Usage
+
+PENDING. See `spec/dummy` for the sample app. 
+
+## Development
+
+After checking out the repo, run `bin/setup` to install dependencies. Then, run `rake rspec` 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/shakacode/react_on_rails. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](contributor-covenant.org) code of conduct.
+
+
+## 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,6 @@
+require "bundler/gem_tasks"
+require "rspec/core/rake_task"
+
+RSpec::Core::RakeTask.new(:spec)
+
+task :default => :spec

data/app/helpers/react_on_rails_helper.rb

@@ -0,0 +1,135 @@
+require 'react_on_rails/react_renderer'
+
+module ReactOnRailsHelper
+
+  # component_name: React component name
+  # props: Ruby Hash which contains the properties to pass to the react object
+  #
+  # Naming Conventions:
+  # Suppose your component is named "App" (can be anything)
+  # 1. Inside app/startup/ServerApp.jsx, setup the component for server rendering. This is used by
+  #    the global exports in step 2
+  # 2. Component_name is changed to CamelizedUpper for the exposed component,
+  #    so we have App as the exposed global (see app/startup/serverGlobals.jsx)
+  # 3. Inside app/startup/ClientApp.jsx, you want to export a function that generates
+  #    your component, and when you generate the component, you must use this naming convention
+  #    to get the data.
+  #    App(__appData__)
+  #    That way it gets the data you pass from the Rails helper.
+  #
+  #  options:
+  #    prerender: <true/false> defaults to true
+  #    trace: <true/false> defaults to false, set to true to print additional info
+  def react_component(component_name, props = {}, options = {})
+    # Create the JavaScript setup of the global to initialize the client rendering
+    # (re-hydrate the data). This enables react rendered on the client to see that the
+    # server has already rendered the HTML.
+    @react_component_index ||= 0
+
+    prerender = options[:prerender].nil? ? true : options[:prerender]
+    trace = options[:trace].nil? ? false : options[:trace]
+
+    dataVariable = "__#{component_name.camelize(:lower)}Data#{@react_component_index}__"
+    reactComponent = component_name.camelize
+    domId = "#{component_name}-react-component-#{@react_component_index}"
+    @react_component_index += 1
+
+    turbolinks_loaded = Object.const_defined?(:Turbolinks)
+    install_render_events = turbolinks_loaded ? turbolinks_bootstrap(domId) : non_turbolinks_bootstrap
+
+    page_loaded_js = <<-JS
+      (function() {
+        window.#{dataVariable} = #{props.to_json};
+        #{define_render_if_dom_node_present(reactComponent, dataVariable, domId, trace)}
+        #{install_render_events}
+      })();
+    JS
+
+    data_from_server_script_tag = javascript_tag(page_loaded_js)
+
+    # Create the HTML rendering part
+    if prerender
+
+      render_js_expression = <<-JS
+          renderReactComponent(this.#{reactComponent}, #{props.to_json})
+      JS
+      server_rendered_react_component_html = render_js(render_js_expression)
+    else
+      server_rendered_react_component_html = ""
+    end
+
+    rendered_output = content_tag(:div,
+                                  server_rendered_react_component_html,
+                                  id: domId)
+
+    <<-HTML.strip_heredoc.html_safe
+      #{data_from_server_script_tag}
+      #{rendered_output}
+    HTML
+  end
+
+  # Takes javascript code and returns the output from it. This is called by react_component, which
+  # sets up the JS code for rendering a react component.
+  # This method could be used by itself to render the output of any javascript that returns a
+  # string of proper HTML.
+  def render_js(js_expression)
+    ReactOnRails::ReactRenderer.new.render_js(js_expression).html_safe
+  end
+
+  private
+
+  def debug_js(react_component, data_variable, dom_id, trace)
+    if trace
+      <<-JS.strip_heredoc
+        console.log("CLIENT SIDE RENDERED #{react_component} with dataVariable #{data_variable} to dom node with id: #{dom_id}");
+      JS
+    else
+      ""
+    end
+  end
+
+  def define_render_if_dom_node_present(react_component, data_variable, dom_id, trace)
+    <<-JS.strip_heredoc
+      var renderIfDomNodePresent = function() {
+        var domNode = document.getElementById('#{dom_id}');
+        if (domNode) {
+          #{debug_js(react_component, data_variable, dom_id, trace)}
+          var reactComponent = #{react_component}(#{data_variable});
+          React.render(reactComponent, domNode);
+        }
+      }
+    JS
+  end
+
+  def non_turbolinks_bootstrap
+    <<-JS.strip_heredoc
+      document.addEventListener("DOMContentLoaded", function(event) {
+        console.log("DOMContentLoaded event fired");
+        renderIfDomNodePresent();
+      });
+    JS
+  end
+
+  def turbolinks_bootstrap(dom_id)
+    <<-JS.strip_heredoc
+      var turbolinksInstalled = typeof(Turbolinks) !== 'undefined';
+      if (!turbolinksInstalled) {
+        console.warn("WARNING: NO TurboLinks detected in JS, but it's in your Gemfile");
+        #{non_turbolinks_bootstrap}
+      } else {
+        function onPageChange(event) {
+          var removePageChangeListener = function() {
+            document.removeEventListener("page:change", onPageChange);
+            document.removeEventListener("page:before-unload", removePageChangeListener);
+            var domNode = document.getElementById('#{dom_id}');
+            React.unmountComponentAtNode(domNode);
+          };
+          document.addEventListener("page:before-unload", removePageChangeListener);
+
+          renderIfDomNodePresent();
+        }
+        document.addEventListener("page:change", onPageChange);
+      }
+    JS
+  end
+end

data/lib/react_on_rails.rb

@@ -0,0 +1,6 @@
+require "react_on_rails/version"
+
+module ReactOnRails
+  class Engine < ::Rails::Engine
+  end
+end

data/lib/react_on_rails/react_renderer.rb

@@ -0,0 +1,44 @@
+module ReactOnRails
+  class ReactRenderer
+
+    # "this" does not need a closure as it refers to the "this" defined by the
+    # calling the calling context which is the "this" in the execJs environment.
+    def render_js_react_component
+      <<-JS.strip_heredoc
+      function renderReactComponent(componentClass, props) {
+        return this.React.renderToString(
+         componentClass(props)
+        );
+      }
+      JS
+    end
+
+    def initialize
+      js_code = "#{bundle_js_code};\n#{render_js_react_component}"
+      @context = ExecJS.compile(js_code)
+    end
+
+    # Returns a html_safe string of HTML for direct insertion on the page by evaluating a js_code.
+    # Note, js_code does not have to be based on React.
+    def render_js(js_code)
+      js_code_wrapper = <<-JS.strip_heredoc
+      (function () {
+        return #{js_code}
+      })()
+      JS
+
+      # This is the html from the JavaScript. Whatever calls this will probably call 'html_safe'
+      # on the string.
+      @context.eval(js_code_wrapper)
+    end
+
+    private
+
+    def bundle_js_code
+      # Calling to_s to get contents of sprockets.
+
+      # TODO: Make this file name configurable
+      Rails.application.assets['generated/server.js'].to_s
+    end
+  end
+end

data/lib/react_on_rails/version.rb

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

data/react_on_rails.gemspec

@@ -0,0 +1,28 @@
+# coding: utf-8
+lib = File.expand_path('../lib', __FILE__)
+$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
+require 'react_on_rails/version'
+
+Gem::Specification.new do |spec|
+  spec.name          = "react_on_rails"
+  spec.version       = ReactOnRails::VERSION
+  spec.authors       = ["Justin Gordon"]
+  spec.email         = ["justin@shakacode.com"]
+
+  spec.summary       = %q{Rails with react server rendering with webpack. }
+  spec.description   = %q{See README.md}
+  spec.homepage      = "https://github.com/shakacode/react_on_rails"
+  spec.license       = "MIT"
+
+  spec.files         = `git ls-files -z`.split("\x0").reject { |f| f.match(%r{^(test|spec|features)/}) }
+  spec.bindir        = "exe"
+  spec.executables   = spec.files.grep(%r{^exe/}) { |f| File.basename(f) }
+  spec.require_paths = ["lib"]
+
+  spec.add_dependency "rails", "~> 4.2"
+  spec.add_dependency "execjs", "~> 2.5"
+
+  spec.add_development_dependency "bundler", "~> 1.10"
+  spec.add_development_dependency "rake", "~> 10.0"
+  spec.add_development_dependency "rspec"
+end

metadata

@@ -0,0 +1,127 @@
+--- !ruby/object:Gem::Specification
+name: react_on_rails
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+platform: ruby
+authors:
+- Justin Gordon
+autorequire: 
+bindir: exe
+cert_chain: []
+date: 2015-08-28 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '4.2'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '4.2'
+- !ruby/object:Gem::Dependency
+  name: execjs
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '2.5'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '2.5'
+- !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'
+description: See README.md
+email:
+- justin@shakacode.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- ".gitignore"
+- ".rspec"
+- ".travis.yml"
+- CODE_OF_CONDUCT.md
+- Gemfile
+- LICENSE.txt
+- README.md
+- Rakefile
+- app/helpers/react_on_rails_helper.rb
+- lib/react_on_rails.rb
+- lib/react_on_rails/react_renderer.rb
+- lib/react_on_rails/version.rb
+- react_on_rails.gemspec
+homepage: https://github.com/shakacode/react_on_rails
+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.4.8
+signing_key: 
+specification_version: 4
+summary: Rails with react server rendering with webpack.
+test_files: []