Merge c9af94a into 03c5e96

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

@@ -58,7 +58,7 @@ def strip_application_js_of_double_blank_lines
       end
 
       def create_react_directories
-        dirs = %w(components containers startup)
+        dirs = %w(components startup)
         dirs.each { |name| empty_directory("client/app/bundles/HelloWorld/#{name}") }
       end
 
@@ -77,7 +77,6 @@ def template_base_files
            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) }
       end
 

lib/generators/react_on_rails/react_no_redux_generator.rb

@@ -8,16 +8,12 @@ class ReactNoReduxGenerator < Rails::Generators::Base
       Rails::Generators.hide_namespace(namespace)
       source_root(File.expand_path("../templates", __FILE__))
 
-      def copy_base_files
+      def copy_react_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}")
+        %w(client/app/bundles/HelloWorld/components/HelloWorldApp.jsx
+           client/app/bundles/HelloWorld/startup/registration.jsx).each do |file|
+             copy_file(base_path + file, file)
+           end
       end
     end
   end

lib/generators/react_on_rails/react_with_redux_generator.rb

@@ -7,26 +7,23 @@ class ReactWithReduxGenerator < Rails::Generators::Base
       source_root(File.expand_path("../templates", __FILE__))
 
       def create_redux_directories
-        dirs = %w(actions constants reducers store)
+        dirs = %w(actions constants containers reducers store)
         dirs.each { |name| empty_directory("client/app/bundles/HelloWorld/#{name}") }
       end
 
       def copy_base_redux_files
         base_path = "redux/base/"
         %w(client/app/bundles/HelloWorld/actions/helloWorldActionCreators.jsx
+           client/app/bundles/HelloWorld/components/HelloWorld.jsx
            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
+           client/app/bundles/HelloWorld/startup/registration.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}")
-      end
     end
   end
 end

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/no_redux/base/client/app/bundles/HelloWorld/components/HelloWorldApp.jsx

@@ -0,0 +1,45 @@
+import React, { PropTypes } from 'react';
+
+export default class HelloWorldApp 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/no_redux/base/client/app/bundles/HelloWorld/startup/registration.jsx

@@ -0,0 +1,8 @@
+import ReactOnRails from 'react-on-rails';
+
+import HelloWorldApp from '../components/HelloWorldApp';
+
+// This is how react_on_rails can see the HelloWorld in the browser.
+ReactOnRails.register({
+  HelloWorldApp,
+});

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/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/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;

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

@@ -0,0 +1,6 @@
+import ReactOnRails from 'react-on-rails';
+
+import HelloWorldApp from './HelloWorldApp';
+
+// This is how react_on_rails can see the HelloWorldApp in the browser.
+ReactOnRails.register({ 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 {