react_on_rails 0.1.3 → 0.1.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 95c7eae480cfc52816e7f263bb1911e708a93687
-  data.tar.gz: a53501d57413eb474a1ee4015af8999849267402
+  metadata.gz: 47bf68c00a2b017047097d27b50e92d6f417b071
+  data.tar.gz: 9eca8eecbee44ad2c857680735b44e61027f365c
 SHA512:
-  metadata.gz: fe6a6b8a89721d0a65356538765129ad63049f70fa291a6785008fe20cc798390ddfc4f71bd1422efdcd7d7cfc0598e041cd6fa74cdbf1e0a5a831b1c07a58a4
-  data.tar.gz: ca064e881bef0e9758f32f165801d91176ee168e1cf887914185aeae36d690ca95554e6eb4331bc6d54d5b2ccf6488405ead090f5fd06b77e5d56617b1de58b5
+  metadata.gz: 566649c85b68a57e26d9ac79bcd9f2b23802c288eb15c4032542fdbe96bf79b6fd9121ced75bb73fe28e1d20ba235e0b155e10d00ac5ae63a64d8db6aa2e4781
+  data.tar.gz: 4ca24d4f09242dd39d0c7842a3c9383c47f9515720bb78a5dd6e575ec0657d293ab2f343000db7d6a4df4306a159374e77d9e67a7afd67650bae3d7d14b7a3b4

data/README.md

@@ -19,14 +19,30 @@ Supports:
 6. Server side rendering with fragment caching
 7. react-router for client side rendering (and maybe server side eventually)
 
-# Links
+## OPEN ISSUES
+1. We've got many open issues. However, none of these should stop you from using this gem if you're using React + Webpack with Rails, especially if you are client rendering.
+2. Almost all the open issues are nice to haves like more tests, or some things that would be nice to have for server rendering.
+3. If you want to work on any of the open issues, please comment on the issue. My team is mentoring anybody that's trying to help with the issues. We've got a private slack room for discussing React + Webpack with Rails.
+4. Longer term, we hope to put in many conveniences into this gem, in terms of Webpack + Rails integration.
+
+## Links
 1. https://github.com/justin808/react-webpack-rails-tutorial/ See https://github.com/shakacode/react-webpack-rails-tutorial/pull/84 for how we integrated it!
 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
-5. If this project is interesting to you, email me at justin@shakacode.com. We're looking for great
+4. Interested in consulting for implementing React with Rails, [email us! contact@shakacode.com](mailto: contact@shakacode.com).
+5. If this project is interesting to you, [email us! contact@shakacode.com](mailto: contact@shakacode.com). We're looking for great
 developers that want to work with Rails + React with a distributed, worldwide team, for our own
 products, client work, and open source.
 
+## How is different than the [react-rails gem](https://github.com/reactjs/react-rails)?
+1. `react_on_rails` depends on [webpack](http://webpack.github.io/). `react-rails` integrates closely with sprockets and
+    helps you integrate JSX and the react code into a Rails project.
+2. Likewise, using Webpack as show in the [react-webpack-rails-tutorial](https://github.com/justin808/react-webpack-rails-tutorial/)
+   does involve some extra setup. However, we feel that tight and simple integration with the node ecosystem is more than
+   worth any minor setup costs.
+3. `react-rails` depends on `jquery-ujs` for client side rendering. `react_on_rails` has it's own JS code that does not
+   depend on jquery.
+
 ## Application Installation
 
 Add these lines to your application's Gemfile, sustituting your preferable JavaScript engine.
@@ -48,12 +64,12 @@ And then execute:
 The main API is a helper:
 
 ```ruby
-  react_component(component_name, props = {}, options = {})
+  <%= react_component(component_name, props = {}, options = {}) %>
 ```
   
 Params are:
 
-* **react_component_name**: can be a React component, created using a ES6 class, or React.createClass,
+* **react_component_name**: [string] can be a React component, created using a ES6 class, or React.createClass,
   or a `generator function` that returns a React component
    
   using ES6
@@ -76,12 +92,12 @@ Params are:
   ```javascript
   global.MyReactComponentApp = MyReactComponentApp;
   ```       
-  See `spec/dummy/client/app/startup/serverGlobals.jsx` and 
-  `spec/dummy/client/app/startup/ClientReduxApp.jsx` for examples of this.
+  If you're curious as to what the gem generates for the server and client rendering, see [`spec/dummy/client/app/startup/serverGlobals.jsx`](https://github.com/shakacode/react_on_rails/blob/master/spec/dummy/spec/sample_generated_js/server-generated.js)
+  and [`spec/dummy/client/app/startup/ClientReduxApp.jsx`](https://github.com/shakacode/react_on_rails/blob/master/spec/dummy/spec/sample_generated_js/client-generated.js) for examples of this. Note, this is not the code that you are providing. You can see the client code by viewing the page source.
   
-* **props**: Ruby Hash which contains the properties to pass to the react object
+* **props**: [hash] Properties to pass to the react object
 
-* **options:**
+* **options:** [hash]
   * **generator_function**: <true/false> default is false, set to true if you want to use a generator function rather than a React Component.
   * **prerender**: <true/false> set to false when debugging!
   * **trace**: <true/false> set to true to print additional debugging information in the browser default is true for development, off otherwise 
@@ -98,11 +114,27 @@ Params are:
    window.HelloWorld = HelloWorld;
    ```   
 3. Follow the examples in `spec/dummy/client/app/startup/serverGlobals.jsx` to expose your react components
-   for client side rendering.
+   for server side rendering.
    ```ruby
    import HelloWorld from '../components/HelloWorld';
    global.HelloWorld = HelloWorld;
    ```
+   
+## Server Rendering Tips
+
+- Your code can't reference `document`. Server side JS execution does not have access to `document`, so jQuery and some
+  other libs won't work in this environment. You can debug this by putting in `console.log`
+  statements in your code.
+- You can conditionally avoid running code that references document by passing in a boolean prop to your top level react
+  component. Since the passed in props Hash from the view helper applies to client and server side code, the best way to
+  do this is to use a generator function.
+
+You might do something like this in some file for your top level component:
+```javascript
+global.App = () => <MyComponent serverSide={true} />;
+```
+
+The point is that you have separate files for top level client or server side, and you pass some extra option indicating that rendering is happening server sie.
 
 ## Optional Configuration   
 
@@ -174,9 +206,6 @@ Contributions and pull requests welcome!
    the `div` element where the inline JavaScript will render the component. You might also notice
    how the props you pass (a Ruby Hash) becomes inline JavaScript on the HTML page.
 
-TODO: Check if this is true still: If you're only doing client rendering, you still *MUST* create an empty version of this file. This
-will soon change so that this is not necessary.
-
 ## JavaScript Runtime Configuration
 See this [discussion on JavaScript performance](https://github.com/shakacode/react_on_rails/issues/21).
 The net result is that you want to add this line to your Gemfile to get therubyracer as your default

data/app/helpers/react_on_rails_helper.rb

@@ -60,8 +60,9 @@ module ReactOnRailsHelper
     data_from_server_script_tag = javascript_tag(page_loaded_js)
 
     # Create the HTML rendering part
-    server_rendered_html =
-      server_rendered_react_component_html(options, props, react_component_name)
+    server_rendered_html, console_script =
+      server_rendered_react_component_html(options, props, react_component_name,
+                                           data_variable_name, dom_id)
 
     rendered_output = content_tag(:div,
                                   server_rendered_html,
@@ -71,6 +72,7 @@ module ReactOnRailsHelper
     <<-HTML.html_safe
 #{data_from_server_script_tag}
 #{rendered_output}
+#{console_script}
     HTML
   end
 
@@ -79,22 +81,23 @@ module ReactOnRailsHelper
     @react_component_index += 1
   end
 
-  def server_rendered_react_component_html(options, props, react_component_name)
+  # Returns Array [0]: html, [1]: script to console log
+  def server_rendered_react_component_html(options, props, react_component_name, data_variable, dom_id)
     if prerender(options)
       render_js_expression = <<-JS
 (function(React) {
+        #{debug_js(react_component_name, data_variable, dom_id, trace(options))}
         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
-      server_rendered_react_component_html =
-        render_js(render_js_expression, options)
+      options[:server_side] = true
+      render_js_internal(render_js_expression, options)
     else
-      server_rendered_react_component_html = ""
+      ["",""]
     end
-    server_rendered_react_component_html
   end
 
   # Takes javascript code and returns the output from it. This is called by react_component, which
@@ -102,13 +105,23 @@ 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 = {})
+    result = render_js_internal(js_expression, options)
+    "#{result[0]}\n#{result[1]}".html_safe
+  end
+
+  private
+  # 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.
+  # Returns Array [0]: html, [1]: script to console log
+  def render_js_internal(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
+                                                       options)
   end
 
-  private
 
   def trace(options)
     options.fetch(:trace) { ReactOnRails.configuration.trace }
@@ -124,7 +137,7 @@ module ReactOnRailsHelper
 
   def debug_js(react_component_name, data_variable, dom_id, trace)
     if trace
-      "console.log(\"CLIENT SIDE RENDERED #{react_component_name} with data_variable"\
+      "console.log(\"RENDERED #{react_component_name} with data_variable"\
       " #{data_variable} to dom node with id: #{dom_id}\");"
     else
       ""

data/lib/react_on_rails/react_renderer.rb

@@ -8,7 +8,11 @@ module ReactOnRails
 var console = { history: [] };
 ['error', 'log', 'info', 'warn'].forEach(function (level) {
   console[level] = function () {
-    console.history.push({level: level, arguments: Array.prototype.slice.call(arguments)});
+    var argArray = Array.prototype.slice.call(arguments);
+    if (argArray.length > 0) {
+      argArray[0] = '[SERVER] ' + argArray[0];
+    }
+    console.history.push({level: level, arguments: argArray});
   };
 });
     JS
@@ -20,11 +24,11 @@ var console = { history: [] };
     CONSOLE_REPLAY = <<-JS
     var history = console.history;
     if (history && history.length > 0) {
-      result += '\\n<script>';
+      consoleReplay += '\\n<script>';
       history.forEach(function (msg) {
-        result += '\\nconsole.' + msg.level + '.apply(console, ' + JSON.stringify(msg.arguments) + ');';
+        consoleReplay += '\\nconsole.' + msg.level + '.apply(console, ' + JSON.stringify(msg.arguments) + ');';
       });
-      result += '\\n</script>';
+      consoleReplay += '\\n</script>';
     }
     JS
 
@@ -37,25 +41,28 @@ var console = { history: [] };
     end
 
     # js_code: JavaScript expression that returns a string.
-    # Returns a string of HTML for direct insertion on the page by evaluating js_code.
+    # Returns an Array:
+    # [0]: string of HTML for direct insertion on the page by evaluating js_code
+    # [1]: console messages
     #   Note, js_code does not have to be based on React.
     # Calling code will probably call 'html_safe' on return value before rendering to the view.
     def render_js(js_code, options = {})
       component_name = options.fetch(:react_component_name, "")
+      server_side = options.fetch(:server_side, false)
 
-      result_js_code = "      result = #{js_code}"
+      result_js_code = "      htmlResult = #{js_code}"
 
       js_code_wrapper = <<-JS
   (function () {
-    var result = '';
+    var htmlResult = '';
+    var consoleReplay = '';
 #{ReactOnRails::ReactRenderer.wrap_code_with_exception_handler(result_js_code, component_name)}
-#{after_render}
-    return result;
+#{console_replay_js_code}
+    return JSON.stringify([htmlResult, consoleReplay]);
   })()
       JS
 
-      trace_rails_on_maui = ENV["TRACE_REACT_ON_RAILS"].present? # Set to anything to print generated code.
-      if trace_rails_on_maui
+      if ENV["TRACE_REACT_ON_RAILS"].present? # Set to anything to print generated code.
         puts "ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ"
         puts "react_renderer.rb: 92"
         puts "wrote file tmp/server-generated.js"
@@ -64,10 +71,12 @@ var console = { history: [] };
       end
 
       if js_context
-        js_context.eval(js_code_wrapper)
+        json_string = js_context.eval(js_code_wrapper)
       else
-        ExecJS.eval(js_code_wrapper)
+        json_string = ExecJS.eval(js_code_wrapper)
       end
+      # element 0 is the html, element 1 is the script tag for the server console output
+      JSON.parse(json_string)
     end
 
     def self.wrap_code_with_exception_handler(js_code, component_name)
@@ -77,13 +86,13 @@ var console = { history: [] };
     }
     catch(e) {
       var lineOne =
-            'ERROR: You specifed the option generator_function (could be in your defaults) to be\\n';
+            'ERROR: You specified 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' +
+            '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)) {
@@ -92,7 +101,7 @@ var console = { history: [] };
       }
 
       var shouldBeGeneratorError = lineOne +
-            'true, but the react component \\'#{component_name}\\' is not a generator function.\\n' +
+            '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)) {
@@ -100,25 +109,31 @@ var console = { history: [] };
         console.error(shouldBeGeneratorError);
       }
 
-      console.error('SERVER SIDE: Exception in server side rendering!');
+      #{render_error_messages}
+    }
+      JS
+    end
+
+    private
+
+    def self.render_error_messages
+      <<-JS
+      console.error('Exception in rendering!');
       if (e.fileName) {
-        console.error('SERVER SIDE: location: ' + e.fileName + ':' + e.lineNumber);
+        console.error('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' +
+      console.error('message: ' + e.message);
+      console.error('stack: ' + e.stack);
+      msg += '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
 
-    private
-
-    def after_render
+    def console_replay_js_code
       @replay_console ? CONSOLE_REPLAY : ""
     end
 

data/lib/react_on_rails/version.rb

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

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: react_on_rails
 version: !ruby/object:Gem::Version
-  version: 0.1.3
+  version: 0.1.4
 platform: ruby
 authors:
 - Justin Gordon
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2015-09-20 00:00:00.000000000 Z
+date: 2015-09-27 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails