react_on_rails 1.0.1 → 1.0.2

data/docs/additional_reading/optional_configuration.md

@@ -0,0 +1,34 @@
+# Optional Configuration
+
+Create a file `config/react_on_rails.rb` to override any defaults (this file is automatically created for you when using the generator). If you don't specify this file, the default options are below.
+
+The `server_bundle_js_file` must correspond to the bundle you want to use for server rendering.
+
+```ruby
+# Shown below are the defaults for configuration
+ReactOnRails.configure do |config|
+  # Client bundles are configured in application.js
+  # Server bundle is a single file for all server rendering of components.
+  # Set the server_bundle_js_file to "" if you know that you will not be server rendering.
+  config.server_bundle_js_file = "app/assets/javascripts/generated/server.js" # This is the default
+
+  # Below options can be overriden by passing to the helper method.
+  config.prerender = false # default is false
+  config.generator_function = false # default is false, meaning that you expose ReactComponents directly
+  config.trace = Rails.env.development? # default is true for development, off otherwise
+
+  # For server rendering. This can be set to false so that server side messages are discarded.
+  config.replay_console = true # Default is true. Be cautious about turning this off.
+  config.logging_on_server = true # Default is true. Logs server rendering messags to Rails.logger.info
+
+  # Settings for the pool of renderers:
+  config.server_renderer_pool_size  ||= 1  # ExecJS doesn't allow more than one on MRI
+  config.server_renderer_timeout    ||= 20 # seconds
+end
+```
+
+You can configure your pool of JS virtual machines and specify where it should load code:
+
+- On MRI, use `therubyracer` for the best performance (see [discussion](https://github.com/reactjs/react-rails/pull/290))
+- On MRI, you'll get a deadlock with `pool_size` > 1
+- If you're using JRuby, you can increase `pool_size` to have real multi-threaded rendering.

data/docs/additional_reading/server_rendering_tips.md

@@ -0,0 +1,16 @@
+# 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.
+- If you're serious about server rendering, it's worth the effort to have different entry points for client and server rendering. It's worth the extra complexity.
+
+You might also 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.

data/docs/additional_reading/tips.md

@@ -0,0 +1,10 @@
+# Tips
++ **DO NOT RUN `rails s`** and instead run 
+
+    `foreman start -f Procfile.dev`
+
+    to automatically start the webpack file watchers that will regenerate your JavaScript. Note, RSpec does not automatically rebuild the bundle files, so you could get incorrect results from your tests if you change the client code and do not rebuild the bundles. The same problem occurs when pulling down changes from GitHub and running tests without first rebuilding the bundles.
++ The default for rendering right now is `prerender: false`. **NOTE:**  Server side rendering does not work for some components that use an async setup for server rendering. You can configure the default for prerender in your config.
++ You can expose either a React component or a function that returns a React component. If you wish to create a React component via a function, rather than simply props, then you need to set the property "generator" on that helper invocation to true (or change the defaults). When that is done, the function is invoked with a single parameter of "props", and that function should return a React element.
++ Be sure you can first render your react component **client only** before you try to debug server rendering!
++ Open up the HTML source and take a look at the generated HTML and the JavaScript to see what's going on under the covers. Note that when server rendering is turned on, then you'll see the server rendered react components. When server rendering is turned off, then you'll only see the `div` element where the in-line JavaScript will render the component. You might also notice how the props you pass (a Ruby Hash) becomes in-line JavaScript on the HTML page.

data/lib/generators/react_on_rails/base_generator.rb

@@ -8,12 +8,30 @@ module ReactOnRails
       hide!
       source_root(File.expand_path("../templates", __FILE__))
 
+      # --redux
+      class_option :redux,
+                   type: :boolean,
+                   default: false,
+                   desc: "Install Redux gems and Redux version of Hello World Example",
+                   aliases: "-R"
       # --server-rendering
       class_option :server_rendering,
                    type: :boolean,
                    default: false,
                    desc: "Configure for server-side rendering of webpack JavaScript",
                    aliases: "-S"
+      # --skip-js-linters
+      class_option :skip_js_linters,
+                   type: :boolean,
+                   default: false,
+                   desc: "Skip installing JavaScript linting files",
+                   aliases: "-j"
+      # --ruby-linters
+      class_option :ruby_linters,
+                   type: :boolean,
+                   default: false,
+                   desc: "Install ruby linting files, tasks, and configs",
+                   aliases: "-L"
 
       def add_hello_world_route
         route "get 'hello_world', to: 'hello_world#index'"
@@ -89,10 +107,8 @@ module ReactOnRails
            client/index.jade
            client/npm-shrinkwrap.json
            client/server.js
-           client/webpack.client.base.config.js
            client/webpack.client.hot.config.js
            client/webpack.client.rails.config.js
-           client/app/bundles/HelloWorld/startup/clientGlobals.jsx
            lib/tasks/assets.rake
            REACT_ON_RAILS.md
            client/REACT_ON_RAILS_CLIENT_README.md
@@ -102,14 +118,29 @@ module ReactOnRails
       def template_base_files
         base_path = "base/base/"
         %w(Procfile.dev
-           app/views/hello_world/index.html.erb).each { |file| template(base_path + file + ".tt", file) }
+           app/views/hello_world/index.html.erb
+           client/webpack.client.base.config.js
+           client/package.json).each { |file| template(base_path + file + ".tt", file) }
+      end
+
+      def template_client_globals_file
+        filename = options.server_rendering? ? "clientGlobals.jsx" : "globals.jsx"
+        location = "client/app/bundles/HelloWorld/startup"
+        template("base/base/#{location}/globals.jsx.tt", "#{location}/#{filename}")
       end
 
       def install_server_rendering_files_if_enabled
         return unless options.server_rendering?
         base_path = "base/server_rendering/"
         %w(client/webpack.server.rails.config.js
-           client/app/bundles/HelloWorld/startup/serverGlobals.jsx).each { |file| copy_file(base_path + file, file) }
+           client/app/bundles/HelloWorld/startup/serverGlobals.jsx).each do |file|
+          copy_file(base_path + file, file)
+        end
+      end
+
+      def template_linter_files_if_appropriate
+        return if !options.ruby_linters? && options.skip_js_linters?
+        template("base/base/lib/tasks/linters.rake.tt", "lib/tasks/linters.rake")
       end
     end
   end

data/lib/generators/react_on_rails/bootstrap_generator.rb

@@ -32,11 +32,24 @@ module ReactOnRails
            client/bootstrap-sass.config.js).each { |file| copy_file(base_path + file, file) }
       end
 
-      def change_application_css_to_scss_if_necessary
-        stylesheets_path = File.join(destination_root, "app/assets/stylesheets")
-        application_css = File.join(stylesheets_path, "application.css")
-        return unless File.exist?(application_css)
-        File.rename(application_css, File.join(stylesheets_path, "application.css.scss"))
+      # rename to application.scss from application.css or application.css.scss
+      def force_application_scss_naming_if_necessary
+        base_path = "app/assets/stylesheets/"
+        application_css = "#{base_path}application.css"
+        application_css_scss = "#{base_path}application.css.scss"
+
+        bad_name = dest_file_exists?(application_css) || dest_file_exists?(application_css_scss)
+        return unless bad_name
+
+        new_name = File.join(destination_root, "#{base_path}application.scss")
+        File.rename(bad_name, new_name)
+      end
+
+      # if there still is not application.scss, just create one
+      def create_application_scss_if_necessary
+        path = File.join(destination_root, "app/assets/stylesheets/application.scss")
+        return if File.exist?(path)
+        File.open(path, "w") { |f| f.puts "// Created by React on Rails gem\n\n" }
       end
 
       def prepend_to_application_scss
@@ -63,11 +76,18 @@ module ReactOnRails
           @import 'post-bootstrap';
 
         DATA
-        append_to_file("app/assets/stylesheets/application.css.scss", data)
+
+        application_scss = File.join(destination_root, "app/assets/stylesheets/application.scss")
+
+        if File.exist?(application_scss)
+          append_to_file(application_scss, data)
+        else
+          puts_setup_file_error(application_scss, data)
+        end
       end
 
       def strip_application_scss_of_incompatible_sprockets_statements
-        application_scss = File.join(destination_root, "app/assets/stylesheets/application.css.scss")
+        application_scss = File.join(destination_root, "app/assets/stylesheets/application.scss")
         gsub_file(application_scss, "*= require_tree .", "")
         gsub_file(application_scss, "*= require_self", "")
       end

data/lib/generators/react_on_rails/generator_helper.rb

@@ -1,11 +1,13 @@
 module GeneratorHelper
   # Takes a relative path from the destination root, such as `.gitignore` or `app/assets/javascripts/application.js`
   def dest_file_exists?(file)
-    File.exist?(File.join(destination_root, file)) ? file : nil
+    dest_file = File.join(destination_root, file)
+    File.exist?(dest_file) ? dest_file : nil
   end
 
   def dest_dir_exists?(dir)
-    Dir.exist?(File.join(destination_root, dir)) ? dir : nil
+    dest_dir = File.join(destination_root, dir)
+    Dir.exist?(dest_dir) ? dest_dir : nil
   end
 
   # Takes the missing file and the

data/lib/generators/react_on_rails/install_generator.rb

@@ -1,16 +1,3 @@
-# Install Generator: gem's only public generator
-#
-# Usage:
-#   rails generate react_on_rails:install [options]
-#
-# Options:
-#   [--redux], [--no-redux]
-#     Indicates when to generate with redux
-#   [--server-rendering], [--no-server-rendering]
-#     Indicates whether ability for server-side rendering of webpack output should be enabled
-#   [--skip-linters]
-#     Indicates whether linter files and configs should be installed
-#
 require "rails/generators"
 
 module ReactOnRails
@@ -20,19 +7,25 @@ module ReactOnRails
       class_option :redux,
                    type: :boolean,
                    default: false,
-                   desc: "Setup Redux files",
+                   desc: "Install Redux gems and Redux version of Hello World Example",
                    aliases: "-R"
       # --server-rendering
       class_option :server_rendering,
                    type: :boolean,
                    default: false,
-                   desc: "Configure for server-side rendering of webpack JavaScript",
+                   desc: "Add necessary files and configurations for server-side rendering",
                    aliases: "-S"
-      # --linters
-      class_option :linters,
+      # --skip-js-linters
+      class_option :skip_js_linters,
                    type: :boolean,
                    default: false,
-                   desc: "Install linter files",
+                   desc: "Skip installing JavaScript linting files",
+                   aliases: "-j"
+      # --ruby-linters
+      class_option :ruby_linters,
+                   type: :boolean,
+                   default: false,
+                   desc: "Install ruby linting files, tasks, and configs",
                    aliases: "-L"
 
       def run_generators
@@ -41,7 +34,8 @@ module ReactOnRails
         invoke "react_on_rails:base"
         invoke "react_on_rails:react_no_redux" unless options.redux?
         invoke "react_on_rails:react_with_redux" if options.redux?
-        invoke "react_on_rails:linters" if options.linters?
+        invoke "react_on_rails:js_linters" unless options.skip_js_linters?
+        invoke "react_on_rails:ruby_linters" if options.ruby_linters?
         invoke "react_on_rails:bootstrap"
         invoke "react_on_rails:heroku_deployment"
       end

data/lib/generators/react_on_rails/js_linters_generator.rb

@@ -0,0 +1,19 @@
+require "rails/generators"
+
+module ReactOnRails
+  module Generators
+    class JsLintersGenerator < Rails::Generators::Base
+      hide!
+      source_root File.expand_path("../templates", __FILE__)
+
+      # NOTE: linter modules are included via template in base/base/client/package.json.tt
+
+      def copy_js_linter_config_files
+        base_path = "js_linters/"
+        %w(client/.eslintrc
+           client/.eslintignore
+           client/.jscsrc).each { |file| copy_file(base_path + file, file) }
+      end
+    end
+  end
+end

data/lib/generators/react_on_rails/react_no_redux_generator.rb

@@ -18,11 +18,9 @@ module ReactOnRails
       def copy_base_files
         base_path = "no_redux/base/"
         %w(client/app/bundles/HelloWorld/components/HelloWorldWidget.jsx
-           client/app/bundles/HelloWorld/containers/HelloWorld.jsx
-           client/app/bundles/HelloWorld/startup/HelloWorldAppClient.jsx).each do |file|
+           client/app/bundles/HelloWorld/containers/HelloWorld.jsx).each do |file|
              copy_file(base_path + file, file)
            end
-        template("#{base_path}client/package.json", "client/package.json")
       end
 
       def copy_server_rendering_files_if_appropriate
@@ -32,6 +30,12 @@ module ReactOnRails
           copy_file(base_path + file, file)
         end
       end
+
+      def template_appropriate_version_of_hello_world_app_client
+        filename = options.server_rendering? ? "HelloWorldAppClient.jsx" : "HelloWorldApp.jsx"
+        location = "client/app/bundles/HelloWorld/startup"
+        template("no_redux/base/#{location}/HelloWorldAppClient.jsx.tt", "#{location}/#{filename}")
+      end
     end
   end
 end

data/lib/generators/react_on_rails/react_with_redux_generator.rb

@@ -1,16 +1,3 @@
-# Install Generator: gem's only public generator
-#
-# Usage:
-#   rails generate react_on_rails:install [options]
-#
-# Options:
-#   [--redux], [--no-redux]
-#     Indicates when to generate with redux
-#   [--hello-world-example], [--no-hello-world-example]
-#     Indicates when to generate with hello world example
-#   [--server-rendering], [--no-server-rendering]
-#     Indicates whether ability for server-side rendering of webpack output should be enabled
-#
 require "rails/generators"
 
 module ReactOnRails
@@ -41,12 +28,10 @@ module ReactOnRails
            client/app/bundles/HelloWorld/constants/helloWorldConstants.jsx
            client/app/bundles/HelloWorld/reducers/helloWorldReducer.jsx
            client/app/bundles/HelloWorld/reducers/index.jsx
-           client/app/bundles/HelloWorld/startup/HelloWorldAppClient.jsx
            client/app/bundles/HelloWorld/store/helloWorldStore.jsx
            client/app/lib/middlewares/loggerMiddleware.js).each do |file|
              copy_file(base_path + file, file)
            end
-        template("#{base_path}client/package.json", "client/package.json")
       end
 
       def copy_server_rendering_redux_files
@@ -56,6 +41,12 @@ module ReactOnRails
           copy_file(base_path + file, file)
         end
       end
+
+      def template_appropriate_version_of_hello_world_app_client
+        filename = options.server_rendering? ? "HelloWorldAppClient.jsx" : "HelloWorldApp.jsx"
+        location = "client/app/bundles/HelloWorld/startup"
+        template("redux/base/#{location}/HelloWorldAppClient.jsx.tt", "#{location}/#{filename}")
+      end
     end
   end
 end

data/lib/generators/react_on_rails/ruby_linters_generator.rb

@@ -0,0 +1,33 @@
+require "rails/generators"
+
+module ReactOnRails
+  module Generators
+    class RubyLintersGenerator < Rails::Generators::Base
+      hide!
+      source_root File.expand_path("../templates", __FILE__)
+
+      def add_ruby_linter_gems_to_gemfile
+        linter_gems = <<-GEMS.strip_heredoc
+
+          # require: false is necessary for the linters as we only want them loaded
+          # when used by the linting rake tasks.
+          group :development do
+            gem("rubocop", require: false)
+            gem("ruby-lint", require: false)
+            gem("scss_lint", require: false)
+          end
+        GEMS
+        append_to_file("Gemfile", linter_gems)
+      end
+
+      def copy_ruby_linting_and_auditing_tasks
+        base_path = "ruby_linters/"
+        %w(lib/tasks/brakeman.rake
+           lib/tasks/ci.rake
+           .rubocop.yml
+           .scss-lint.yml
+           ruby-lint.yml).each { |file| copy_file(base_path + file, file) }
+      end
+    end
+  end
+end

data/lib/generators/react_on_rails/templates/base/base/client/app/bundles/HelloWorld/startup/globals.jsx.tt

@@ -0,0 +1,5 @@
+<%- component_name = options.server_rendering? ? "HelloWorldAppClient" : "HelloWorldApp" -%>
+import <%= component_name %> from './<%= component_name %>';
+
+// This is how react_on_rails can see the HelloWorldApp in the browser.
+window.HelloWorldApp = <%= component_name %>;

data/lib/generators/react_on_rails/templates/{redux → base}/base/client/package.json.tt

@@ -29,49 +29,62 @@
     "build:client": "NODE_ENV=production webpack --config webpack.client.rails.config.js",
     "build:server": "NODE_ENV=production webpack --config webpack.server.rails.config.js",
     "build:dev:client": "webpack -w --config webpack.client.rails.config.js",
-    "build:dev:server": "webpack -w --config webpack.server.rails.config.js",<%- if options.linters? %>
+    "build:dev:server": "webpack -w --config webpack.server.rails.config.js"<% unless options.skip_js_linters? -%>,
     "lint": "npm run eslint && npm run jscs",
     "eslint": "eslint --ext .js,.jsx .",
-    "jscs": "jscs --verbose ."<%- end %>
+    "jscs": "jscs --verbose ."
+    <%- end -%>
   },
   "dependencies": {
     "babel-core": "^5.8.25",
     "babel-loader": "^5.3.2",
-    "body-parser": "^1.14.1",
     "es5-shim": "^4.1.14",
     "es6-promise": "^3.0.2",
     "expose-loader": "^0.7.0",
+    <%- if options.redux? -%>
     "immutable": "^3.7.5",
+    <%- end -%>
     "imports-loader": "^0.6.4",
     "jquery": "^2.1.4",
     "jquery-ujs": "^1.1.0-1",
+    <%- if options.redux? -%>
     "lodash": "https://registry.npmjs.org/lodash/-/lodash-3.10.1.tgz",
+    <%- end -%>
     "loader-utils": "^0.2.11",
+    <%- if options.redux? -%>
     "mirror-creator": "0.0.1",
+    <%- end -%>
     "react": "^0.14.0",
     "react-bootstrap": "^0.27.0",
     "react-dom": "^0.14.0",
+    <%- if options.redux? -%>
     "react-redux": "^3.1.0",
     "redux": "^3.0.2",
     "redux-promise": "^0.5.0",
     "redux-thunk": "^1.0.0",
-    "sleep": "^3.0.0",
+    <%- end -%>
     "webpack": "^1.12.2"
   },
-  "devDependencies": {<%- if options.linters? %>
-    "babel-eslint": "^4.1.3",<%- end %>
+  "devDependencies": {
+    <%- unless options.skip_js_linters? -%>
+    "babel-eslint": "^4.1.3",
+    <%- end -%>
     "babel-plugin-react-transform": "^1.1.1",
     "bootstrap-sass": "^3.3.5",
     "bootstrap-sass-loader": "^1.0.9",
-    "css-loader": "^0.19.0",<%- if options.linters? %>
+    "css-loader": "^0.19.0",
+    <%- unless options.skip_js_linters? -%>
     "eslint": "^1.6.0",
     "eslint-config-airbnb": "0.1.0",
-    "eslint-plugin-react": "^3.5.1",<%- end %>
+    "eslint-plugin-react": "^3.5.1",
+    <%- end -%>
     "esprima-fb": "^15001.1001.0-dev-harmony-fb",
     "express": "^4.13.3",
     "file-loader": "^0.8.4",
-    "jade": "^1.11.0",<%- if options.linters? %>
-    "jscs": "^2.3.0",<%- end %>
+    "jade": "^1.11.0",
+    <%- unless options.skip_js_linters? -%>
+    "jscs": "^2.3.0",
+    <%- end -%>
     "node-sass": "^3.3.3",
     "react-transform-hmr": "^1.0.1",
     "sass-loader": "^3.0.0",