Update Basic Generator & Linters (#624)

* Update basic generator so that the basic example is simpler
* All files registered for react on rails go in the registration.js file.

Gemfile

@@ -32,6 +32,7 @@ gem "web-console", "~> 2.0", group: :development
 
 # below are copied from spec/dummy/Gemfile
 gem "rspec-rails"
+gem "rspec-retry"
 gem "capybara"
 gem "capybara-screenshot"
 gem "capybara-webkit"

lib/generators/react_on_rails/base_generator.rb

@@ -44,7 +44,7 @@ def update_application_js
         DATA
 
         app_js_path = "app/assets/javascripts/application.js"
-        found_app_js = dest_file_exists?(app_js_path) || dest_file_exists?(app_js_path + ".coffee")
+        found_app_js = dest_file_exists?(app_js_path) || dest_file_exists?("#{app_js_path}.coffee")
         if found_app_js
           prepend_to_file(found_app_js, data)
         else
@@ -65,20 +65,19 @@ def create_react_directories
       def copy_base_files
         base_path = "base/base/"
         base_files = %w(app/controllers/hello_world_controller.rb
+                        client/app/bundles/HelloWorld/components/HelloWorld.jsx
                         client/.babelrc
                         client/webpack.config.js
                         client/REACT_ON_RAILS_CLIENT_README.md)
-        base_files.each { |file| copy_file(base_path + file, file) }
+        base_files.each { |file| copy_file("#{base_path}#{file}", file) }
       end
 
       def template_base_files
         base_path = "base/base/"
         %w(config/initializers/react_on_rails.rb
            Procfile.dev
-           app/views/hello_world/index.html.erb
            package.json
-           client/app/bundles/HelloWorld/components/HelloWorld.jsx
-           client/package.json).each { |file| template(base_path + file + ".tt", file) }
+           client/package.json).each { |file| template("#{base_path}#{file}.tt", file) }
       end
 
       def add_base_gems_to_gemfile

lib/generators/react_on_rails/react_no_redux_generator.rb

@@ -8,16 +8,16 @@ class ReactNoReduxGenerator < Rails::Generators::Base
       Rails::Generators.hide_namespace(namespace)
       source_root(File.expand_path("../templates", __FILE__))
 
-      def copy_base_files
-        base_path = "no_redux/base/"
-        file = "client/app/bundles/HelloWorld/containers/HelloWorldContainer.jsx"
-        copy_file(base_path + file, file)
-      end
-
-      def template_appropriate_version_of_hello_world_app
-        filename = "HelloWorldApp.jsx"
-        location = "client/app/bundles/HelloWorld/startup"
-        template("no_redux/base/#{location}/HelloWorldApp.jsx.tt", "#{location}/#{filename}")
+      def create_appropriate_templates
+        base_path = "base/base/"
+        location = "client/app/bundles/HelloWorld/"
+        source = base_path + location
+        config = {
+          component_name: "HelloWorld",
+          app_relative_path: "../components/HelloWorld"
+        }
+        template("#{source}/startup/registration.jsx.tt", "#{location}/startup/registration.jsx", config)
+        template("#{base_path}app/views/hello_world/index.html.erb.tt", "app/views/hello_world/index.html.erb", config)
       end
     end
   end

lib/generators/react_on_rails/react_with_redux_generator.rb

@@ -17,15 +17,22 @@ def copy_base_redux_files
            client/app/bundles/HelloWorld/containers/HelloWorldContainer.jsx
            client/app/bundles/HelloWorld/constants/helloWorldConstants.jsx
            client/app/bundles/HelloWorld/reducers/helloWorldReducer.jsx
-           client/app/bundles/HelloWorld/store/helloWorldStore.jsx).each do |file|
+           client/app/bundles/HelloWorld/store/helloWorldStore.jsx
+           client/app/bundles/HelloWorld/startup/HelloWorldApp.jsx).each do |file|
              copy_file(base_path + file, file)
            end
       end
 
-      def template_appropriate_version_of_hello_world_app
-        filename = "HelloWorldApp.jsx"
-        location = "client/app/bundles/HelloWorld/startup"
-        template("redux/base/#{location}/HelloWorldApp.jsx.tt", "#{location}/#{filename}")
+      def create_appropriate_templates
+        base_path = "base/base/"
+        location = "client/app/bundles/HelloWorld/"
+        source = base_path + location
+        config = {
+          component_name: "HelloWorldApp",
+          app_relative_path: "./HelloWorldApp"
+        }
+        template("#{source}/startup/registration.jsx.tt", "#{location}/startup/registration.jsx", config)
+        template("#{base_path}app/views/hello_world/index.html.erb.tt", "app/views/hello_world/index.html.erb", config)
       end
     end
   end

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

@@ -1,3 +1,3 @@
 <h1>Hello World</h1>
-<%%= react_component("HelloWorldApp", props: @hello_world_props, prerender: false) %>
+<%%= react_component("<%= config[:component_name] %>", props: @hello_world_props, prerender: false) %>
 

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

@@ -0,0 +1,45 @@
+import React, { PropTypes } from 'react';
+
+export default class HelloWorld extends React.Component {
+  static propTypes = {
+    name: PropTypes.string.isRequired, // this is passed from the Rails view
+  };
+
+  /**
+   * @param props - Comes from your rails view.
+   * @param _railsContext - Comes from React on Rails
+   */
+  constructor(props, _railsContext) {
+    super(props);
+
+    // How to set initial state in ES6 class syntax
+    // https://facebook.github.io/react/docs/reusable-components.html#es6-classes
+    this.state = { name: this.props.name };
+  }
+
+  updateName = (name) => {
+    this.setState({ name });
+  };
+
+  render() {
+    return (
+      <div>
+        <h3>
+          Hello, {this.state.name}!
+        </h3>
+        <hr />
+        <form >
+          <label htmlFor="name">
+            Say hello to:
+          </label>
+          <input
+            id="name"
+            type="text"
+            value={this.state.name}
+            onChange={(e) => this.updateName(e.target.value)}
+          />
+        </form>
+      </div>
+    );
+  }
+}

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

@@ -0,0 +1,8 @@
+import ReactOnRails from 'react-on-rails';
+
+import <%= config[:component_name] %> from '<%= config[:app_relative_path] %>';
+
+// This is how react_on_rails can see the HelloWorld in the browser.
+ReactOnRails.register({
+  <%= config[:component_name] %>,
+});

lib/generators/react_on_rails/templates/base/base/client/webpack.config.js

@@ -1,3 +1,7 @@
+/* eslint comma-dangle: ["error",
+  {"functions": "never", "arrays": "only-multiline", "objects":
+"only-multiline"} ] */
+
 const webpack = require('webpack');
 const path = require('path');
 
@@ -9,7 +13,7 @@ const config = {
     'es5-shim/es5-shim',
     'es5-shim/es5-sham',
     'babel-polyfill',
-    './app/bundles/HelloWorld/startup/HelloWorldApp',
+    './app/bundles/HelloWorld/startup/registration',
   ],
 
   output: {

lib/generators/react_on_rails/templates/node/base/client/node/server.js

@@ -68,7 +68,7 @@ fs.watchFile(bundlePath + bundleFileName, (curr) => {
       return;
     }
 
-    // eslint-disable-next-line global-require
+    // eslint-disable-next-line global-require, import/no-dynamic-require
     require(bundlePath + bundleFileName);
     console.log(`Loaded server bundle: ${bundlePath + bundleFileName}`);
     handler.initialize();

lib/generators/react_on_rails/templates/redux/base/client/app/bundles/HelloWorld/startup/HelloWorldApp.jsx.tt

@@ -16,5 +16,4 @@ const HelloWorldApp = (props, _railsContext) => (
   </Provider>
 );
 
-// This is how react_on_rails can see the HelloWorldApp in the browser.
-ReactOnRails.register({ HelloWorldApp });
+export default HelloWorldApp;

node_package/src/ReactOnRails.js

@@ -62,12 +62,14 @@ ctx.ReactOnRails = {
   setOptions(newOptions) {
     if ('traceTurbolinks' in newOptions) {
       this.options.traceTurbolinks = newOptions.traceTurbolinks;
+
+      // eslint-disable-next-line no-param-reassign
       delete newOptions.traceTurbolinks;
     }
 
     if (Object.keys(newOptions).length > 0) {
       throw new Error(
-        'Invalid options passed to ReactOnRails.options: ', JSON.stringify(newOptions)
+        'Invalid options passed to ReactOnRails.options: ', JSON.stringify(newOptions),
       );
     }
   },

node_package/src/clientStartup.js

@@ -37,7 +37,7 @@ function turbolinksInstalled() {
 
 function forEach(fn, className, railsContext) {
   const els = document.getElementsByClassName(className);
-  for (let i = 0; i < els.length; i++) {
+  for (let i = 0; i < els.length; i += 1) {
     fn(els[i], railsContext);
   }
 }
@@ -141,7 +141,7 @@ export function clientStartup(context) {
     return;
   }
 
-  // eslint-disable-next-line no-underscore-dangle
+  // eslint-disable-next-line no-underscore-dangle, no-param-reassign
   context.__REACT_ON_RAILS_EVENT_HANDLERS_RAN_ONCE__ = true;
 
   debugTurbolinks('Adding DOMContentLoaded event to install event listeners.');
@@ -153,13 +153,13 @@ export function clientStartup(context) {
 
     if (!turbolinksInstalled()) {
       debugTurbolinks(
-        'NOT USING TURBOLINKS: DOMContentLoaded event, calling reactOnRailsPageLoaded'
+        'NOT USING TURBOLINKS: DOMContentLoaded event, calling reactOnRailsPageLoaded',
       );
       reactOnRailsPageLoaded();
     } else if (turbolinksVersion5()) {
       debugTurbolinks(
         'USING TURBOLINKS 5: document added event listeners turbolinks:before-cache and ' +
-        'turbolinks:load.'
+        'turbolinks:load.',
       );
       document.addEventListener('turbolinks:before-cache', reactOnRailsPageUnloaded);
       document.addEventListener('turbolinks:load', reactOnRailsPageLoaded);

node_package/src/serverRenderReactComponent.js

@@ -20,13 +20,13 @@ export default function serverRenderReactComponent(options) {
       hasErrors = !!reactElementOrRouterResult.routeError;
       if (hasErrors) {
         console.error(
-          `React Router ERROR: ${JSON.stringify(reactElementOrRouterResult.routeError)}`
+          `React Router ERROR: ${JSON.stringify(reactElementOrRouterResult.routeError)}`,
         );
       } else if (trace) {
         const redirectLocation = reactElementOrRouterResult.redirectLocation;
         const redirectPath = redirectLocation.pathname + redirectLocation.search;
         console.log(`\
-ROUTER REDIRECT: ${name} to dom node with id: ${domNodeId}, redirect to ${redirectPath}`
+ROUTER REDIRECT: ${name} to dom node with id: ${domNodeId}, redirect to ${redirectPath}`,
         );
       }
     } else {

node_package/tests/Authenticity.test.js

@@ -1,5 +1,5 @@
 import test from 'tape';
-import ReactOnRails from '../src/ReactOnRails.js';
+import ReactOnRails from '../src/ReactOnRails';
 
 test('authenticityToken and authenticityHeaders', (assert) => {
   assert.plan(4);
@@ -25,6 +25,6 @@ test('authenticityToken and authenticityHeaders', (assert) => {
   const realHeader = ReactOnRails.authenticityHeaders();
 
   assert.deepEqual(realHeader, { 'X-CSRF-Token': testToken, 'X-Requested-With': 'XMLHttpRequest' },
-    'authenticityHeaders returns valid header with CFRS token'
+    'authenticityHeaders returns valid header with CFRS token',
   );
 });

node_package/tests/ComponentRegistry.test.js

@@ -70,7 +70,7 @@ test('ComponentRegistry throws error for retrieving unregistered component', (as
   assert.plan(1);
   assert.throws(() => ComponentRegistry.get('foobar'),
     /Could not find component registered with name foobar/,
-    'Expected an exception for calling ComponentRegistry.get with an invalid name.'
+    'Expected an exception for calling ComponentRegistry.get with an invalid name.',
   );
 });
 
@@ -79,6 +79,6 @@ test('ComponentRegistry throws error for setting null component', (assert) => {
   const C6 = null;
   assert.throws(() => ComponentRegistry.register({ C6 }),
     /Called register with null component named C6/,
-    'Expected an exception for calling ComponentRegistry.set with a null component.'
+    'Expected an exception for calling ComponentRegistry.set with a null component.',
   );
 });