react_on_rails 5.2.0 → 6.0.0.beta.1

data/docs/basics/migrating-from-react-rails.md

@@ -0,0 +1,17 @@
+## Migrate From react-rails
+If you are using [react-rails](https://github.com/reactjs/react-rails) in your project, it is pretty simple to migrate to [react_on_rails](https://github.com/shakacode/react_on_rails).
+
+- Remove the 'react-rails' gem from your Gemfile.
+
+- Remove the generated lines for react-rails in your application.js file.
+
+```
+//= require react
+//= require react_ujs
+//= require components
+```
+
+- Follow our getting started guide: https://github.com/shakacode/react_on_rails#getting-started.
+
+Note: If you have components from react-rails you want to use, then you will need to port them into react_on_rails which uses webpack instead of the asset pipeline.
+

data/docs/contributor-info/contributing.md

@@ -1,6 +1,17 @@
 # Tips for Contributors
 *See [Releasing](./releasing.md) for instructions on releasing.*
 
+## Sumary
+
+For non-doc fixes:
+
+* Provide changelog entry in the [unreleased section of the CHANGELOG.md](https://github.com/shakacode/react_on_rails/blob/master/CHANGELOG.md#unreleased).
+* Ensure CI passes and that you added a test that passes with the fix and fails without the fix.
+* Squash all commits down to one with a nice commit message *ONLY* once final review is given. Make sure this single commit is rebased on top of master.
+* Please address all code review comments.
+* Ensure that docs are updated accordingly if a feature is added.
+
+
 ## To run tests:
 * After updating code via git, to prepare all examples and run all tests:
 

data/lib/generators/USAGE

@@ -1,10 +1,7 @@
 Description:
 
-The react_on_rails:install generator combined with the example pull requests of
-generator runs will get you up and running efficiently. There's a fair bit of
-setup involved when integrating Webpack with Rails. Defaults for options
-are such that the default is for the flag to be off. For example, the default for
-`-R` is that redux is off, and the default of -b is that skip-bootstrap is off.
+The react_on_rails:install generator integrates webpack with rails with ease. You
+can pass the redux option if you'd like to have redux setup for you automatically.
 
 * Redux
 
@@ -12,88 +9,6 @@ are such that the default is for the flag to be off. For example, the default fo
     to integrate the Redux state container framework. The necessary node modules
     will be automatically included for you.
 
-    The generator uses the organizational `paradigm of "bundles"`. These are like
-    application domains and are used for grouping your code into webpack bundles
-    in case you decide to create different bundles for deployment. This is also
-    useful for separating out logical parts of your application. We recommend that
-    that each bundle will have it's own Redux store. If you have code that you
-    want to reuse across bundles, such as middleware or common utilities, place them
-    under `/client/app/lib`. You can then import them in your client code:
-    `import MyModule from 'lib/MyModule'`; since we have configured webpack to
-    automatically resolve the word lib to point to this folder.
-
-* Using Images and Fonts
-
-    The generator has amended the folders created in `client/assets/` to Rails's
-    asset path. We recommend that if you have any existing assets that you want
-    to use with your client code, you should move them to these folders and use
-    webpack as normal. This allows webpack's development server to have access
-    to your assets, as it will not be able to see any assets in the default Rails
-    directories which are above the `/client` directory.
-
-    Alternatively, if you have many existing assets and don't wish to move them,
-    you could consider creating symlinks from `client/assets` that point to your
-    Rails assets folders inside of `app/assets/`. The assets there will then be
-    visible to both Rails and webpack.
-
-* Bootstrap Integration
-
-    React on Rails ships with Twitter Bootstrap already integrated into the build.
-    Note that the generator removes require_tree in both the application.js and
-    application.css.scss files. This is to ensure the correct load order for the
-    bootstrap integration, and is usually a good idea in general. You will therefore
-    need to explicitly require your files.
-
-    How the Bootstrap library is loaded depends upon whether one is using the Rails
-    server or the HMR development server.
-
-    1. Bootstrap via Rails Server
-
-        The Rails server loads bootstrap-sprockets, provided
-        by the bootstrap-sass ruby gem (added automatically to your Gemfile by
-        the generator), via the `app/assets/stylesheets/_bootstrap-custom.scss`
-        partial.
-
-        This allows for using Bootstrap in your regular Rails stylesheets. If you
-        wish to customize any of the Bootstrap variables, you can do so via the
-        `client/assets/stylesheets/_pre-bootstrap.scss` partial.
-
-    2. Bootstrap via Webpack Dev Server
-
-        The webpack dev server does not go through Rails but instead loads bootstrap
-        via the `bootstrap-sass-loader` webpack loader. You can configure the loader
-        via the `client/bootstrap-sass-config.js` file.
-
-    3. Keeping Custom Bootstrap Configurations Synced
-
-        Because the webpack dev server and Rails each load Bootstrap via a different
-        file (explained in the two sections immediately above), any changes to
-        the way components are loaded in one file must also be made to the other
-        file in order to keep styling consistent between the two. For example,
-        if an import is excluded in _bootstrap-custom.scss, the same import should
-        be excluded in `bootstrap-sass-config.js` so that styling in the Rails
-        server and the webpack dev server will be the same.
-
-    4. Skip Bootstrap Integration
-
-        Bootstrap integration is enabled by default, but can be disabled by passing
-        the --skip-bootstrap flag (alias -b). When you don't need Bootstrap in your
-        existing project, just skip it as needed.
-
-* JavaScript Linters
-
-    JavaScript linters are enabled by default, but can be disabled by passing the
-    --skip-js-linters flag (alias j), and those that run in Node have been added to
-    `client/package.json` under devDependencies.
-
-* Ruby Linters
-
-    Ruby linters are disabled by default, but can be enabled by passing the
-    `--ruby-linters` flag when generating. These linters have been added to your
-    Gemfile in addition to the the appropriate Rake tasks.
-
-    We really love using all the linters! Give them a try.
-
 *******************************************************************************
 
 After running the generator, you will want to:
@@ -102,14 +17,7 @@ After running the generator, you will want to:
 
 Then you may run
 
-    npm run
-
-And you will see several useful commands:
-
-    express-server
-      echo 'visit http://localhost:4000' && cd client && npm start
-    rails-server
-      echo 'visit http://localhost:3000/hello_world' && foreman start -f Procfile.dev
+    foreman start -f Procfile.dev
 
 More Details:
 

data/lib/generators/react_on_rails/base_generator.rb

@@ -4,7 +4,7 @@ require_relative "generator_helper"
 
 module ReactOnRails
   module Generators
-    class BaseGenerator < Rails::Generators::Base # rubocop:disable Metrics/ClassLength
+    class BaseGenerator < Rails::Generators::Base
       include GeneratorHelper
       Rails::Generators.hide_namespace(namespace)
       source_root(File.expand_path("../templates", __FILE__))
@@ -15,12 +15,6 @@ module ReactOnRails
                    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"
 
       def add_hello_world_route
         route "get 'hello_world', to: 'hello_world#index'"
@@ -45,14 +39,7 @@ module ReactOnRails
 
       def update_application_js
         data = <<-DATA.strip_heredoc
-          // DO NOT REQUIRE jQuery or jQuery-ujs in this file!
-          // DO NOT REQUIRE TREE!
-
-          // CRITICAL that vendor-bundle must be BEFORE bootstrap-sprockets and turbolinks
-          // since it is exposing jQuery and jQuery-ujs
-
-          //= require vendor-bundle
-          //= require app-bundle
+          //= require webpack-bundle
 
         DATA
 
@@ -65,13 +52,6 @@ module ReactOnRails
         end
       end
 
-      def strip_application_js_of_incompatible_sprockets_statements
-        application_js = File.join(destination_root, "app/assets/javascripts/application.js")
-        gsub_file(application_js, "//= require jquery_ujs", "// require jquery_ujs")
-        gsub_file(application_js, %r{//= require jquery$}, "// require jquery")
-        gsub_file(application_js, %r{//= require_tree \.$}, "// require_tree .")
-      end
-
       def strip_application_js_of_double_blank_lines
         application_js = File.join(destination_root, "app/assets/javascripts/application.js")
         gsub_file(application_js, /^\n^\n/, "\n")
@@ -86,10 +66,7 @@ module ReactOnRails
         base_path = "base/base/"
         base_files = %w(app/controllers/hello_world_controller.rb
                         client/.babelrc
-                        client/webpack.client.base.config.js
-                        client/webpack.client.rails.config.js
-                        REACT_ON_RAILS.md
-                        client/REACT_ON_RAILS_CLIENT_README.md)
+                        client/webpack.config.js)
         base_files.each { |file| copy_file(base_path + file, file) }
       end
 
@@ -104,35 +81,25 @@ module ReactOnRails
       end
 
       def add_base_gems_to_gemfile
-        return unless options.server_rendering?
         append_to_file("Gemfile", "\ngem 'therubyracer', platforms: :ruby\n")
       end
 
-      def template_client_registration_file
-        filename = "clientRegistration.jsx"
-        location = "client/app/bundles/HelloWorld/startup"
-        template("base/base/#{location}/clientRegistration.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/serverRegistration.jsx).each do |file|
+      def install_node_files
+        base_path = "base/base/"
+        %w(client/node/package.json
+           client/node/server.js).each do |file|
           copy_file(base_path + file, file)
         end
       end
 
-      def template_assets_rake_file
-        template("base/base/lib/tasks/assets.rake.tt", "lib/tasks/assets.rake")
-      end
-
       ASSETS_RB_APPEND = <<-DATA.strip_heredoc
 # Add client/assets/ folders to asset pipeline's search path.
 # If you do not want to move existing images and fonts from your Rails app
 # you could also consider creating symlinks there that point to the original
 # rails directories. In that case, you would not add these paths here.
-Rails.application.config.assets.precompile += %w( server-bundle.js )
+# If you have a different server bundle file than your client bundle, you'll
+# need to add it here, like this:
+# Rails.application.config.assets.precompile += %w( server-bundle.js )
 
 # Add folder with webpack generated assets to assets.paths
 Rails.application.config.assets.paths << Rails.root.join("app", "assets", "webpack")

data/lib/generators/react_on_rails/dev_tests_generator.rb

@@ -8,6 +8,12 @@ module ReactOnRails
       Rails::Generators.hide_namespace(namespace)
       source_root(File.expand_path("../templates/dev_tests", __FILE__))
 
+      # --example-server-rendering
+      class_option :example_server_rendering,
+                   type: :boolean,
+                   default: false,
+                   desc: "Setup prerender true for server rendered examples"
+
       def copy_rspec_files
         %w(spec/spec_helper.rb
            spec/rails_helper.rb
@@ -40,7 +46,7 @@ module ReactOnRails
   plugins: [
 TEXT
         sentinel = /^\s\s},\n\s\splugins: \[\n/
-        config = File.join(destination_root, "client", "webpack.client.base.config.js")
+        config = File.join(destination_root, "client", "webpack.config.js")
         old_contents = File.read(config)
         new_contents = old_contents.gsub(sentinel, text)
         File.open(config, "w+") { |f| f.puts new_contents }
@@ -53,6 +59,16 @@ TEXT
         gem("coveralls", require: false)
         gem("poltergeist")
       end
+
+      def gsub_prerender_if_server_rendering
+        return unless options.example_server_rendering
+        hello_world_index = File.join(destination_root, "app", "views", "hello_world", "index.html.erb")
+        hello_world_contents = File.read(hello_world_index)
+        new_hello_world_contents = hello_world_contents.gsub(/prerender: false/,
+                                                             "prerender: true")
+
+        File.open(hello_world_index, "w+") { |f| f.puts new_hello_world_contents }
+      end
     end
   end
 end

data/lib/generators/react_on_rails/install_generator.rb

@@ -16,12 +16,6 @@ module ReactOnRails
                    default: false,
                    desc: "Install Redux gems and Redux version of Hello World Example. Default: false",
                    aliases: "-R"
-      # --server-rendering
-      class_option :server_rendering,
-                   type: :boolean,
-                   default: false,
-                   desc: "Add necessary files and configurations for server-side rendering. Default: false",
-                   aliases: "-S"
 
       # --ignore-warnings
       class_option :ignore_warnings,

data/lib/generators/react_on_rails/react_no_redux_generator.rb

@@ -8,30 +8,16 @@ module ReactOnRails
       Rails::Generators.hide_namespace(namespace)
       source_root(File.expand_path("../templates", __FILE__))
 
-      # --server-rendering
-      class_option :server_rendering,
-                   type: :boolean,
-                   default: false,
-                   desc: "Configure for server-side rendering of webpack JavaScript",
-                   aliases: "-S"
-
       def copy_base_files
         base_path = "no_redux/base/"
         file = "client/app/bundles/HelloWorld/containers/HelloWorld.jsx"
         copy_file(base_path + file, file)
       end
 
-      def copy_server_rendering_files_if_appropriate
-        return unless options.server_rendering?
-        base_path = "no_redux/server_rendering/"
-        file = "client/app/bundles/HelloWorld/startup/HelloWorldAppServer.jsx"
-        copy_file(base_path + file, file)
-      end
-
-      def template_appropriate_version_of_hello_world_app_client
-        filename = "HelloWorldAppClient.jsx"
+      def template_appropriate_version_of_hello_world_app
+        filename = "HelloWorldApp.jsx"
         location = "client/app/bundles/HelloWorld/startup"
-        template("no_redux/base/#{location}/HelloWorldAppClient.jsx.tt", "#{location}/#{filename}")
+        template("no_redux/base/#{location}/HelloWorldApp.jsx.tt", "#{location}/#{filename}")
       end
     end
   end

data/lib/generators/react_on_rails/react_with_redux_generator.rb

@@ -6,18 +6,9 @@ module ReactOnRails
       Rails::Generators.hide_namespace(namespace)
       source_root(File.expand_path("../templates", __FILE__))
 
-      # --server-rendering
-      class_option :server_rendering,
-                   type: :boolean,
-                   default: false,
-                   desc: "Configure for server-side rendering of webpack JavaScript",
-                   aliases: "-S"
-
       def create_redux_directories
         dirs = %w(actions constants reducers store)
         dirs.each { |name| empty_directory("client/app/bundles/HelloWorld/#{name}") }
-
-        empty_directory("client/app/lib/middlewares")
       end
 
       def copy_base_redux_files
@@ -27,23 +18,15 @@ 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/store/helloWorldStore.jsx
-           client/app/lib/middlewares/loggerMiddleware.js).each do |file|
+           client/app/bundles/HelloWorld/store/helloWorldStore.jsx).each do |file|
              copy_file(base_path + file, file)
            end
       end
 
-      def copy_server_rendering_redux_files
-        return unless options.server_rendering?
-        base_path = "redux/server_rendering/"
-        file = "client/app/bundles/HelloWorld/startup/HelloWorldAppServer.jsx"
-        copy_file(base_path + file, file)
-      end
-
-      def template_appropriate_version_of_hello_world_app_client
-        filename = "HelloWorldAppClient.jsx"
+      def template_appropriate_version_of_hello_world_app
+        filename = "HelloWorldApp.jsx"
         location = "client/app/bundles/HelloWorld/startup"
-        template("redux/base/#{location}/HelloWorldAppClient.jsx.tt", "#{location}/#{filename}")
+        template("redux/base/#{location}/HelloWorldApp.jsx.tt", "#{location}/#{filename}")
       end
     end
   end

data/lib/generators/react_on_rails/templates/base/base/Procfile.dev.tt

@@ -1,3 +1,3 @@
 web: rails s
-client: sh -c 'rm app/assets/webpack/* || true && cd client && npm run build:dev:client'
-<%- if options.server_rendering? %>server: sh -c 'cd client && npm run build:dev:server'<%- end %>
+client: sh -c 'rm app/assets/webpack/* || true && cd client && npm run build:development'
+node: sh -c 'cd client/node && npm start'

data/lib/generators/react_on_rails/templates/base/base/app/views/hello_world/index.html.erb.tt

@@ -1,4 +1,3 @@
-<h1 class="alert alert-info this-works"><%= options.server_rendering? ? "Server Rendering" : "Client Rendering" %></h1>
-<%%= react_component("HelloWorldApp",
-                     props: @hello_world_props,
-                     prerender: <%= options.server_rendering? %>) %>
+<h1 class="alert alert-info this-works">Hello World</h1>
+<%%= react_component("HelloWorldApp", props: @hello_world_props, prerender: false) %>
+

data/lib/generators/react_on_rails/templates/base/base/client/app/bundles/HelloWorld/components/HelloWorldWidget.jsx.tt

@@ -2,7 +2,6 @@
 // all your dump component names with Widget.
 
 import React, { PropTypes } from 'react';
-import _ from 'lodash';
 
 // Simple example of a React "dumb" component
 export default class HelloWorldWidget extends React.Component {
@@ -13,15 +12,6 @@ export default class HelloWorldWidget extends React.Component {
     name: PropTypes.string.isRequired,
   };
 
-  constructor(props, context) {
-    super(props, context);
-
-    // Uses lodash to bind all methods to the context of the object instance, otherwise
-    // the methods defined here would not refer to the component's class, not the component
-    // instance itself.
-    _.bindAll(this, 'handleChange');
-  }
-
   // React will automatically provide us with the event `e`
   handleChange(e) {
     const name = e.target.value;
@@ -43,7 +33,7 @@ export default class HelloWorldWidget extends React.Component {
           <input
             type="text"
             value={name}
-            onChange={this.handleChange}
+            onChange={e => this.handleChange(e)}
           />
         </form>
       </div>