react_on_rails 0.1.2 → 0.1.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 6ff4186feb1c1939c00dd049ef22d868aea660f6
-  data.tar.gz: 0b5808c38aeb2a3092ec374e6fa8ff2871849f57
+  metadata.gz: 95c7eae480cfc52816e7f263bb1911e708a93687
+  data.tar.gz: a53501d57413eb474a1ee4015af8999849267402
 SHA512:
-  metadata.gz: 1c3262b0bb0634626438299e5330e4bd4268a743ddb83f795adfbb2a8e29ed3dc9daf4c987dfca29113c68d66d1daf9e2d5b5277bf59b02cb391dfa28ab6f59e
-  data.tar.gz: 0885111f10b06d283bbc39058492a1f5d6e9ff958cc61ba1a4b67ece33a7c78af6006232a1ef380be349d6d7ea8fa2021a022e749574ad9f649fea0107902536
+  metadata.gz: fe6a6b8a89721d0a65356538765129ad63049f70fa291a6785008fe20cc798390ddfc4f71bd1422efdcd7d7cfc0598e041cd6fa74cdbf1e0a5a831b1c07a58a4
+  data.tar.gz: ca064e881bef0e9758f32f165801d91176ee168e1cf887914185aeae36d690ca95554e6eb4331bc6d54d5b2ccf6488405ead090f5fd06b77e5d56617b1de58b5

data/.babelrc

@@ -0,0 +1,3 @@
+{
+  "stage": 0
+}

data/.rubocop.yml

@@ -24,3 +24,39 @@ Style/StringLiterals:
 
 Style/Documentation:
   Enabled: false
+
+Lint/AssignmentInCondition:
+  Exclude:
+    - 'spec/dummy/bin/spring'
+
+# Offense count: 2
+Lint/HandleExceptions:
+  Exclude:
+    - 'spec/dummy/bin/rails'
+    - 'spec/dummy/bin/rake'
+
+# Offense count: 1
+Metrics/AbcSize:
+  Max: 18
+
+# Offense count: 1
+# Configuration parameters: CountComments.
+Metrics/ClassLength:
+  Max: 114
+
+# Offense count: 9
+# Configuration parameters: CountComments.
+Metrics/MethodLength:
+  Max: 38
+
+# Offense count: 1
+# Configuration parameters: CountComments.
+Metrics/ModuleLength:
+  Max: 119
+
+# Offense count: 3
+# Configuration parameters: AllowedVariables.
+Style/GlobalVars:
+  Exclude:
+    - 'spec/dummy/config/environments/development.rb'
+

data/README.md

@@ -77,7 +77,7 @@ Params are:
   global.MyReactComponentApp = MyReactComponentApp;
   ```       
   See `spec/dummy/client/app/startup/serverGlobals.jsx` and 
-  `spec/dummy/client/app/startup/ClientApp.jsx` for examples of this.
+  `spec/dummy/client/app/startup/ClientReduxApp.jsx` for examples of this.
   
 * **props**: Ruby Hash which contains the properties to pass to the react object
 
@@ -221,6 +221,11 @@ Start the sample app like this for some debug printing:
 TRACE_REACT_ON_RAILS=true && foreman start
 ```
 
+### Generated JavaScript
+
+1. See spec/dummy/spec/sample_generated_js/server-generated.js to see the JavaScript for typical server rendering.
+2. See spec/dummy/spec/sample_generated_js/client-generated.js to see the JavaScript for typical client rendering.
+
 ### Linting
 All linting is performed from the docker container. You will need docker and docker-compose installed
 locally to lint code changes via the lint container. 

data/Rakefile

@@ -3,12 +3,12 @@ require "fileutils"
 namespace :run_rspec do
   desc "Run RSpec for top level only"
   task :gem do
-    sh %{ rspec --exclude-pattern "spec/dummy/**/*_spec.rb" spec }
+    sh %( rspec --exclude-pattern "spec/dummy/**/*_spec.rb" spec )
   end
 
   desc "Run RSpec for spec/dummy only"
   task :dummy do
-    sh %{ cd spec/dummy && rspec }
+    sh %( cd spec/dummy && rspec )
   end
 
   task run_rspec: [:gem, :dummy] do
@@ -21,7 +21,6 @@ task run_rspec: ["run_rspec:run_rspec"]
 task default: :run_rspec
 
 namespace :lint do
-
   desc "Run Rubocop as shell"
   task :rubocop do
     sh "rubocop ."
@@ -44,7 +43,7 @@ namespace :lint do
 
   desc "Run jscs from shell"
   task :jscs do
-    sh "jscs ."
+    sh "jscs -e ."
   end
 
   task lint: [:eslint, :rubocop, :ruby, :jscs, :scss] do
@@ -67,7 +66,7 @@ namespace :docker do
 
   desc "Run scss-lint linter from docker"
   task :scss do
-    sh"docker-compose run lint rake lint:scss"
+    sh "docker-compose run lint rake lint:scss"
   end
 
   desc "Run eslint linter from docker"
@@ -87,5 +86,3 @@ end
 
 desc "Runs all linters from docker. Run `rake -D docker` to see all available lint options"
 task docker: ["docker:lint"]
-
-

data/app/helpers/react_on_rails_helper.rb

@@ -1,7 +1,11 @@
-require 'react_on_rails/react_renderer'
+require "react_on_rails/react_renderer"
 
-module ReactOnRailsHelper
+# NOTE:
+# For any heredoc JS:
+# 1. The white spacing in this file matters!
+# 2. Keep all #{some_var} fully to the left so that all indentation is done evenly in that var
 
+module ReactOnRailsHelper
   # react_component_name: can be a React component, created using a ES6 class, or
   #   React.createClass, or a
   #     `generator function` that returns a React component
@@ -47,8 +51,9 @@ module ReactOnRailsHelper
     page_loaded_js = <<-JS
 (function() {
   window.#{data_variable_name} = #{props.to_json};
-  #{define_render_if_dom_node_present(react_component_name, data_variable_name, dom_id, trace(options), generator_function(options))}
-  #{install_render_events}
+#{define_render_if_dom_node_present(react_component_name, data_variable_name, dom_id,
+                                    trace(options), generator_function(options))}
+#{install_render_events}
 })();
     JS
 
@@ -77,10 +82,10 @@ module ReactOnRailsHelper
   def server_rendered_react_component_html(options, props, react_component_name)
     if prerender(options)
       render_js_expression = <<-JS
-        (function(React) {
-          var reactElement = #{render_js_react_element(react_component_name, props.to_json, generator_function(options))};
-          return React.renderToString(reactElement);
-        })(this.React);
+(function(React) {
+        var reactElement = #{render_js_react_element(react_component_name, props.to_json, generator_function(options))}
+        return React.renderToString(reactElement);
+      })(this.React);
       JS
       # create the server generated html of the react component with props
       options[:react_component_name] = react_component_name
@@ -97,6 +102,8 @@ module ReactOnRailsHelper
   # 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, options = {})
+    # TODO: This should be changed so that we don't create a new context every time
+    # Example of doing this here: https://github.com/reactjs/react-rails/tree/master/lib/react/rails
     ReactOnRails::ReactRenderer.new(options).render_js(js_expression,
                                                        options).html_safe
   end
@@ -117,9 +124,8 @@ module ReactOnRailsHelper
 
   def debug_js(react_component_name, data_variable, dom_id, trace)
     if trace
-      <<-JS
-console.log("CLIENT SIDE RENDERED #{react_component_name} with data_variable #{data_variable} to dom node with id: #{dom_id}");
-      JS
+      "console.log(\"CLIENT SIDE RENDERED #{react_component_name} with data_variable"\
+      " #{data_variable} to dom node with id: #{dom_id}\");"
     else
       ""
     end
@@ -142,58 +148,58 @@ console.log("CLIENT SIDE RENDERED #{react_component_name} with data_variable #{d
 
     <<-JS
 (function(React) {
-  var props = #{props_string};
-  return #{js_create_element};
-})(this.React);
+          var props = #{props_string};
+          return #{js_create_element};
+        })(this.React);
     JS
   end
 
   def define_render_if_dom_node_present(react_component_name, data_variable, dom_id, trace, generator_function)
     inner_js_code = <<-JS_CODE
-    var domNode = document.getElementById('#{dom_id}');
-    if (domNode) {
-      #{debug_js(react_component_name, data_variable, dom_id, trace)}
-      var reactElement = #{render_js_react_element(react_component_name, data_variable, generator_function)};
-      React.render(reactElement, domNode);
-    }
-    JS_CODE
+      var domNode = document.getElementById('#{dom_id}');
+      if (domNode) {
+        #{debug_js(react_component_name, data_variable, dom_id, trace)}
+        var reactElement = #{render_js_react_element(react_component_name, data_variable, generator_function)}
+        React.render(reactElement, domNode);
+      }
+JS_CODE
 
     <<-JS
-var renderIfDomNodePresent = function() {
-  #{ReactOnRails::ReactRenderer.wrap_code_with_exception_handler(inner_js_code, react_component_name)}
-}
+  var renderIfDomNodePresent = function() {
+#{ReactOnRails::ReactRenderer.wrap_code_with_exception_handler(inner_js_code, react_component_name)}
+  }
     JS
   end
 
   def non_turbolinks_bootstrap
     <<-JS
-document.addEventListener("DOMContentLoaded", function(event) {
-  console.log("DOMContentLoaded event fired");
-  renderIfDomNodePresent();
-});
+    document.addEventListener("DOMContentLoaded", function(event) {
+      console.log("DOMContentLoaded event fired");
+      renderIfDomNodePresent();
+    });
     JS
   end
 
   def turbolinks_bootstrap(dom_id)
     <<-JS
-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();
+  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);
   }
-  document.addEventListener("page:change", onPageChange);
-}
     JS
   end
 end

data/lib/react_on_rails/configuration.rb

@@ -18,11 +18,16 @@ module ReactOnRails
 
     def initialize(server_bundle_js_file: nil, prerender: nil, replay_console: nil,
                    generator_function: nil, trace: nil)
-      self.server_bundle_js_file = server_bundle_js_file
+      if File.exist?(server_bundle_js_file)
+        self.server_bundle_js_file = server_bundle_js_file
+      else
+        self.server_bundle_js_file = nil
+      end
+
       self.prerender = prerender
       self.replay_console = replay_console
       self.generator_function = generator_function
-      self.trace = Rails.env.development?
+      self.trace = trace.nil? ? Rails.env.development? : trace
     end
   end
 end

data/lib/react_on_rails/react_renderer.rb

@@ -18,29 +18,21 @@ var console = { history: [] };
     # that we intend to write to the browser. Thus, the script tag will get executed right after
     # the HTML is rendered.
     CONSOLE_REPLAY = <<-JS
-var history = console.history;
-if (history && history.length > 0) {
-  result += '\\n<script>';
-  history.forEach(function (msg) {
-    result += '\\nconsole.' + msg.level + '.apply(console, ' + JSON.stringify(msg.arguments) + ');';
-  });
-  result += '\\n</script>';
-}
+    var history = console.history;
+    if (history && history.length > 0) {
+      result += '\\n<script>';
+      history.forEach(function (msg) {
+        result += '\\nconsole.' + msg.level + '.apply(console, ' + JSON.stringify(msg.arguments) + ');';
+      });
+      result += '\\n</script>';
+    }
     JS
 
     DEBUGGER = <<-JS
       if (typeof window !== 'undefined') { debugger; }
     JS
 
-    def base_js_code
-      <<-JS
-        #{CONSOLE_POLYFILL}
-        #{bundle_js_code};
-      JS
-    end
-
     def initialize(options)
-      @context = ExecJS.compile(base_js_code)
       @replay_console = options.fetch(:replay_console) { ReactOnRails.configuration.replay_console }
     end
 
@@ -51,73 +43,76 @@ if (history && history.length > 0) {
     def render_js(js_code, options = {})
       component_name = options.fetch(:react_component_name, "")
 
-      result_js_code = "result = #{js_code}"
+      result_js_code = "      result = #{js_code}"
 
       js_code_wrapper = <<-JS
-(function () {
-  var result = '';
-  #{ReactOnRails::ReactRenderer.wrap_code_with_exception_handler(result_js_code, component_name)}
-  #{after_render};
-  return result;
-})()
+  (function () {
+    var result = '';
+#{ReactOnRails::ReactRenderer.wrap_code_with_exception_handler(result_js_code, component_name)}
+#{after_render}
+    return result;
+  })()
       JS
 
       trace_rails_on_maui = ENV["TRACE_REACT_ON_RAILS"].present? # Set to anything to print generated code.
       if trace_rails_on_maui
         puts "ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ"
         puts "react_renderer.rb: 92"
-        puts "js_code_wrapper = #{js_code_wrapper.ai}"
         puts "wrote file tmp/server-generated.js"
-        File.write('tmp/server-generated.js', js_code_wrapper)
+        File.write("tmp/server-generated.js", js_code_wrapper)
         puts "ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ"
       end
 
-      @context.eval(js_code_wrapper)
+      if js_context
+        js_context.eval(js_code_wrapper)
+      else
+        ExecJS.eval(js_code_wrapper)
+      end
     end
 
     def self.wrap_code_with_exception_handler(js_code, component_name)
       <<-JS
-      try {
-        #{js_code}
-      }
-      catch(e) {
-        var lineOne =
-              'ERROR: You specifed the option generator_function (could be in your defaults) to be\\n';
-        var lastLine =
-              'A generator function takes a single arg of props and returns a ReactElement.';
-
-        var msg = '';
-        var shouldBeGeneratorError = lineOne +
-              'false, but the react component \\'#{component_name}\\' seems to be a generator function.\\n' +
-        lastLine;
-        var reMatchShouldBeGeneratorError = /Can't add property context, object is not extensible/;
-        if (reMatchShouldBeGeneratorError.test(e.message)) {
-          msg += shouldBeGeneratorError + '\\n\\n';
+    try {
+#{js_code}
+    }
+    catch(e) {
+      var lineOne =
+            'ERROR: You specifed the option generator_function (could be in your defaults) to be\\n';
+      var lastLine =
+            'A generator function takes a single arg of props and returns a ReactElement.';
+
+      var msg = '';
+      var shouldBeGeneratorError = lineOne +
+            'false, but the react component \\'#{component_name}\\' seems to be a generator function.\\n' +
+      lastLine;
+      var reMatchShouldBeGeneratorError = /Can't add property context, object is not extensible/;
+      if (reMatchShouldBeGeneratorError.test(e.message)) {
+        msg += shouldBeGeneratorError + '\\n\\n';
         console.error(shouldBeGeneratorError);
-        }
-
-        var shouldBeGeneratorError = lineOne +
-              'true, but the react component \\'#{component_name}\\' is not a generator function.\\n' +
-        lastLine;
-        var reMatchShouldNotBeGeneratorError = /Cannot call a class as a function/;
-        if (reMatchShouldNotBeGeneratorError.test(e.message)) {
-          msg += shouldBeGeneratorError + '\\n\\n';
+      }
+
+      var shouldBeGeneratorError = lineOne +
+            'true, but the react component \\'#{component_name}\\' is not a generator function.\\n' +
+      lastLine;
+      var reMatchShouldNotBeGeneratorError = /Cannot call a class as a function/;
+      if (reMatchShouldNotBeGeneratorError.test(e.message)) {
+        msg += shouldBeGeneratorError + '\\n\\n';
         console.error(shouldBeGeneratorError);
-        }
-
-        console.error('SERVER SIDE: Exception in server side rendering!');
-        if (e.fileName) {
-          console.error('SERVER SIDE: location: ' + e.fileName + ':' + e.lineNumber);
-        }
-        console.error('SERVER SIDE: message: ' + e.message);
-        console.error('SERVER SIDE: stack: ' + e.stack);
-        msg += 'SERVER SIDE Exception in rendering!\\n' +
-          (e.fileName ? '\\nlocation: ' + e.fileName + ':' + e.lineNumber : '') +
-          '\\nMessage: ' + e.message + '\\n\\n' + e.stack;
-
-        var reactElement = React.createElement('pre', null, msg);
-        result = React.renderToString(reactElement);
       }
+
+      console.error('SERVER SIDE: Exception in server side rendering!');
+      if (e.fileName) {
+        console.error('SERVER SIDE: location: ' + e.fileName + ':' + e.lineNumber);
+      }
+      console.error('SERVER SIDE: message: ' + e.message);
+      console.error('SERVER SIDE: stack: ' + e.stack);
+      msg += 'SERVER SIDE Exception in rendering!\\n' +
+        (e.fileName ? '\\nlocation: ' + e.fileName + ':' + e.lineNumber : '') +
+        '\\nMessage: ' + e.message + '\\n\\n' + e.stack;
+
+      var reactElement = React.createElement('pre', null, msg);
+      result = React.renderToString(reactElement);
+    }
       JS
     end
 
@@ -127,9 +122,29 @@ if (history && history.length > 0) {
       @replay_console ? CONSOLE_REPLAY : ""
     end
 
-    def bundle_js_code
-      js_file = Rails.root.join(ReactOnRails.configuration.server_bundle_js_file)
-      File.read(js_file)
+    def base_js_code(bundle_js_code)
+      <<-JS
+#{CONSOLE_POLYFILL}
+#{bundle_js_code};
+      JS
+    end
+
+    def js_context
+      if @js_context.nil?
+        @js_context = begin
+          server_js_file = ReactOnRails.configuration.server_bundle_js_file
+          if server_js_file.present? && File.exist?(server_js_file)
+            bundle_js_code = File.read(server_js_file)
+            ExecJS.compile(base_js_code(bundle_js_code))
+          else
+            if server_js_file.present?
+              Rails.logger.warn("You specified server rendering JS file: #{server_js_file}, but it cannot be read.")
+            end
+            false # using false so we don't try every time if no server_js file
+          end
+        end
+      end
+      @js_context
     end
   end
 end

data/lib/react_on_rails/version.rb

@@ -1,3 +1,3 @@
 module ReactOnRails
-  VERSION = "0.1.2"
+  VERSION = "0.1.3"
 end

data/react_on_rails.gemspec

@@ -25,5 +25,6 @@ Gem::Specification.new do |spec|
   spec.add_development_dependency "bundler", "~> 1.10"
   spec.add_development_dependency "rake", "~> 10.0"
   spec.add_development_dependency "rspec"
+  spec.add_development_dependency "rubocop"
   spec.add_development_dependency "coveralls"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: react_on_rails
 version: !ruby/object:Gem::Version
-  version: 0.1.2
+  version: 0.1.3
 platform: ruby
 authors:
 - Justin Gordon
@@ -80,6 +80,20 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: '0'
+- !ruby/object:Gem::Dependency
+  name: rubocop
+  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: coveralls
   requirement: !ruby/object:Gem::Requirement
@@ -101,6 +115,7 @@ executables: []
 extensions: []
 extra_rdoc_files: []
 files:
+- ".babelrc"
 - ".coveralls.yml"
 - ".eslintignore"
 - ".eslintrc"