react_on_rails 2.0.0.rc.1 → 2.0.0.rc.3

data/lib/generators/react_on_rails/js_linters_generator.rb

@@ -3,7 +3,7 @@ require "rails/generators"
 module ReactOnRails
   module Generators
     class JsLintersGenerator < Rails::Generators::Base
-      hide!
+      Rails::Generators.hide_namespace(namespace)
       source_root File.expand_path("../templates", __FILE__)
 
       # NOTE: linter modules are included via template in base/base/client/package.json.tt

data/lib/generators/react_on_rails/react_no_redux_generator.rb

@@ -1,11 +1,11 @@
 require "rails/generators"
-require File.expand_path("../generator_helper", __FILE__)
-include GeneratorHelper
+require_relative "generator_helper"
 
 module ReactOnRails
   module Generators
     class ReactNoReduxGenerator < Rails::Generators::Base
-      hide!
+      include GeneratorHelper
+      Rails::Generators.hide_namespace(namespace)
       source_root(File.expand_path("../templates", __FILE__))
 
       # --server-rendering
@@ -17,10 +17,8 @@ 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).each do |file|
-             copy_file(base_path + file, file)
-           end
+        file = "client/app/bundles/HelloWorld/containers/HelloWorld.jsx"
+        copy_file(base_path + file, file)
       end
 
       def copy_server_rendering_files_if_appropriate

data/lib/generators/react_on_rails/react_with_redux_generator.rb

@@ -3,7 +3,7 @@ require "rails/generators"
 module ReactOnRails
   module Generators
     class ReactWithReduxGenerator < Rails::Generators::Base
-      hide!
+      Rails::Generators.hide_namespace(namespace)
       source_root(File.expand_path("../templates", __FILE__))
 
       # --server-rendering
@@ -23,7 +23,6 @@ module ReactOnRails
       def copy_base_redux_files
         base_path = "redux/base/"
         %w(client/app/bundles/HelloWorld/actions/helloWorldActionCreators.jsx
-           client/app/bundles/HelloWorld/components/HelloWorldWidget.jsx
            client/app/bundles/HelloWorld/containers/HelloWorld.jsx
            client/app/bundles/HelloWorld/constants/helloWorldConstants.jsx
            client/app/bundles/HelloWorld/reducers/helloWorldReducer.jsx

data/lib/generators/react_on_rails/ruby_linters_generator.rb

@@ -1,9 +1,11 @@
 require "rails/generators"
+require_relative "generator_helper"
 
 module ReactOnRails
   module Generators
     class RubyLintersGenerator < Rails::Generators::Base
-      hide!
+      include GeneratorHelper
+      Rails::Generators.hide_namespace(namespace)
       source_root File.expand_path("../templates", __FILE__)
 
       def add_ruby_linter_gems_to_gemfile
@@ -25,8 +27,8 @@ module ReactOnRails
         %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) }
+           .scss-lint.yml).each { |file| copy_file(base_path + file, file) }
+        template("ruby_linters/ruby-lint.yml.tt", "ruby-lint.yml")
       end
     end
   end

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

@@ -0,0 +1,4 @@
+web: rails s
+# TODO: MIGRATE from tutorial
+client: sh -c 'rm app/assets/javascripts/generated/* || true && cd client && npm run build:dev:client'
+<%- if options.server_rendering? %>server: sh -c 'cd client && npm run build:dev:server'<%- end %>

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

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

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

@@ -0,0 +1,66 @@
+// HelloWorldWidget is an arbitrary name for any "dumb" component. We do not recommend suffixing
+// all your dump component names with Widget.
+
+import React, { PropTypes } from 'react';
+import _ from 'lodash';
+<%- unless options.skip_bootstrap? -%>
+import { Input } from 'react-bootstrap';
+<%- end -%>
+
+// Simple example of a React "dumb" component
+export default class HelloWorldWidget extends React.Component {
+  static propTypes = {
+    // If you have lots of data or action properties, you should consider grouping them by
+    // passing two properties: "data" and "actions".
+    updateName: PropTypes.func.isRequired,
+    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;
+    this.props.updateName(name);
+  }
+
+  render() {
+    const { name } = this.props;
+    return (
+      <div className="container">
+        <h3>
+          Hello, {name}!
+        </h3>
+        <hr/>
+        <form className="form-horizontal">
+            <%- if options.skip_bootstrap? -%>
+            <label>
+              Say hello to:
+            </label>
+            <input
+              type="text"
+              value={name}
+              onChange={this.handleChange}
+            />
+            <%- else -%>
+            <Input
+              type="text"
+              labelClassName="col-sm-2"
+              wrapperClassName="col-sm-10"
+              label="Say hello to:"
+              value={name}
+              onChange={this.handleChange}
+            />
+            <%- end -%>
+        </form>
+      </div>
+    );
+  }
+}

data/lib/generators/react_on_rails/templates/base/base/client/package.json.tt

@@ -55,8 +55,8 @@
     "jquery": "^2.1.4",
     "jquery-ujs": "^1.1.0-1",
     "loader-utils": "^0.2.11",
-    <%- if options.redux? -%>
     "lodash": "^3.10.1",
+    <%- if options.redux? -%>
     "mirror-creator": "0.0.1",
     <%- end -%>
     "react": "^0.14.3",
@@ -86,13 +86,14 @@
     <%- unless options.skip_js_linters? -%>
     "eslint": "^1.10.3",
     "eslint-config-airbnb": "^2.0.0",
+    "eslint-config-shakacode": "^0.0.1",
     "eslint-plugin-react": "^3.11.3",
     <%- end -%>
     "express": "^4.13.3",
     "file-loader": "^0.8.4",
     "jade": "^1.11.0",
     <%- unless options.skip_js_linters? -%>
-    "jscs": "^2.7.0",
+    "jscs": "^2.8.0",
     <%- end -%>
     "node-sass": "^3.4.2",
     "react-transform-hmr": "^1.0.1",

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

@@ -49,7 +49,7 @@ var server = new WebpackDevServer(webpack(config), {
 
 var initialName = 'Stranger';
 
-server.app.use('/', function(req, res) {
+server.app.use('/', function routePath(req, res) {
   var locals = {
     props: JSON.stringify(initialName),
   };
@@ -58,7 +58,7 @@ server.app.use('/', function(req, res) {
   res.send(html);
 });
 
-server.listen(4000, 'localhost', function(err) {
+server.listen(4000, 'localhost', function onListen(err) {
   if (err) console.log(err);
   console.log('Listening at localhost:4000...');
 });

data/lib/generators/react_on_rails/templates/base/base/client/{webpack.client.base.config.js.tt → webpack.client.base.config.js}

@@ -16,6 +16,8 @@ module.exports = {
     vendor: [
       'babel-polyfill',
       'jquery',
+      'react',
+      'react-dom',
     ],
 
     // This will contain the app entry points defined by webpack.hot.config and webpack.rails.config
@@ -57,8 +59,8 @@ module.exports = {
     loaders: [
 
       // Not all apps require jQuery. Many Rails apps do, such as those using TurboLinks or bootstrap js
-      {test: require.resolve('jquery'), loader: 'expose?jQuery'},
-      {test: require.resolve('jquery'), loader: 'expose?$'},
+      { test: require.resolve('jquery'), loader: 'expose?jQuery' },
+      { test: require.resolve('jquery'), loader: 'expose?$' },
     ],
   },
 };

data/lib/generators/react_on_rails/templates/base/base/client/webpack.client.hot.config.js.tt

@@ -51,7 +51,7 @@ config.module.loaders.push(
       ],
     },
   },
-  {test: /\.css$/, loader: 'style-loader!css-loader'},
+  { test: /\.css$/, loader: 'style-loader!css-loader' },
   {
     test: /\.scss$/,
     loader: 'style!css!sass?outputStyle=expanded&imagePath=/assets/images&includePaths[]=' +
@@ -59,11 +59,11 @@ config.module.loaders.push(
   },
 
   // The url-loader uses DataUrls. The file-loader emits files.
-  {test: /\.woff$/, loader: 'url-loader?limit=10000&mimetype=application/font-woff'},
-  {test: /\.woff2$/, loader: 'url-loader?limit=10000&mimetype=application/font-woff'},
-  {test: /\.ttf$/, loader: 'file-loader'},
-  {test: /\.eot$/, loader: 'file-loader'},
-  {test: /\.svg$/, loader: 'file-loader'}
+  { test: /\.woff$/, loader: 'url-loader?limit=10000&mimetype=application/font-woff' },
+  { test: /\.woff2$/, loader: 'url-loader?limit=10000&mimetype=application/font-woff' },
+  { test: /\.ttf$/, loader: 'file-loader' },
+  { test: /\.eot$/, loader: 'file-loader' },
+  { test: /\.svg$/, loader: 'file-loader' }
 );
 
 module.exports = config;

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

@@ -20,13 +20,13 @@ config.entry.vendor.unshift(
   'es5-shim/es5-sham'
 );
 
+// jquery-ujs MUST GO AFTER jquery, so must use 'push'
 config.entry.vendor.push('jquery-ujs');
 
 // See webpack.common.config for adding modules common to both the webpack dev server and rails
-
 config.module.loaders.push(
-  {test: /\.jsx?$/, loader: 'babel-loader', exclude: /node_modules/},
-  {test: require.resolve('react'), loader: 'imports?shim=es5-shim/es5-shim&sham=es5-shim/es5-sham'}
+  { test: /\.jsx?$/, loader: 'babel-loader', exclude: /node_modules/ },
+  { test: require.resolve('react'), loader: 'imports?shim=es5-shim/es5-shim&sham=es5-shim/es5-sham' }
 );
 
 module.exports = config;

data/lib/generators/react_on_rails/templates/base/base/package.json

@@ -9,7 +9,10 @@
   },
   "scripts": {
     "postinstall": "cd client && npm install",
-    "test": "rspec && (cd client && npm run lint)"
+    "test": "rspec && (cd client && npm run lint)",
+    "node-server-hot": "cd client && npm start",
+    "rails-server-hot": "foreman start -f Procfile.dev-hot",
+    "rails-server": "foreman start -f Procfile.dev"
   },
   "repository": {
     "type": "git",

data/lib/generators/react_on_rails/templates/base/server_rendering/client/webpack.server.rails.config.js

@@ -12,7 +12,7 @@ module.exports = {
   context: __dirname,
   entry: [
     'babel-polyfill',
-    './app/bundles/HelloWorld/startup/serverRegistration'
+    './app/bundles/HelloWorld/startup/serverRegistration',
   ],
   output: {
     filename: 'server-bundle.js',
@@ -27,13 +27,13 @@ module.exports = {
   plugins: [
     new webpack.DefinePlugin({
       'process.env': {
-        NODE_ENV: JSON.stringify('production'),
+        NODE_ENV: JSON.stringify(nodeEnv),
       },
     }),
   ],
   module: {
     loaders: [
-      {test: /\.jsx?$/, loader: 'babel-loader', exclude: /node_modules/},
+      { test: /\.jsx?$/, loader: 'babel-loader', exclude: /node_modules/ },
     ],
   },
 };

data/lib/generators/react_on_rails/templates/bootstrap/client/assets/stylesheets/_post-bootstrap.scss

@@ -6,5 +6,5 @@
 // utilizing bootstrap variables and mixins.
 
 .this-works {
-  color: orange !important;
+  color: orange;
 }

data/lib/generators/react_on_rails/templates/js_linters/client/.eslintrc

@@ -1,7 +1,7 @@
 ---
 parser: babel-eslint
 
-extends: eslint-config-airbnb
+extends: eslint-config-shakacode
 
 plugins:
   - react

data/lib/generators/react_on_rails/templates/no_redux/base/client/app/bundles/HelloWorld/containers/HelloWorld.jsx

@@ -6,27 +6,29 @@ import _ from 'lodash';
 export default class HelloWorld extends React.Component {
   static propTypes = {
     name: PropTypes.string.isRequired, // this is passed from the Rails view
-  }
+  };
 
   constructor(props, context) {
     super(props, context);
 
+    // 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 };
+
     // 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, '_updateName');
+    _.bindAll(this, 'updateName');
   }
 
-  state = {name: this.props.name} // how to set initial state in es2015 class syntax
-
-  _updateName(name) {
-    this.setState({name: name});
+  updateName(name) {
+    this.setState({ name });
   }
 
   render() {
     return (
       <div>
-        <HelloWorldWidget name={this.state.name} _updateName={this._updateName} />
+        <HelloWorldWidget name={this.state.name} updateName={this.updateName} />
       </div>
     );
   }

data/lib/generators/react_on_rails/templates/redux/base/client/app/bundles/HelloWorld/containers/HelloWorld.jsx

@@ -17,6 +17,9 @@ class HelloWorld extends React.Component {
     dispatch: PropTypes.func.isRequired,
 
     // This corresponds to the value used in function select above.
+    // We prefix all property and variable names pointing to Immutable.js objects with '$$'.
+    // This allows us to immediately know we don't call $$helloWorldStore['someProperty'], but
+    // instead use the Immutable.js `get` API for Immutable.Map
     $$helloWorldStore: PropTypes.instanceOf(Immutable.Map).isRequired,
   };
 
@@ -27,12 +30,14 @@ class HelloWorld extends React.Component {
   render() {
     const { dispatch, $$helloWorldStore } = this.props;
     const actions = bindActionCreators(helloWorldActionCreators, dispatch);
+    const { updateName } = actions;
+    const name = $$helloWorldStore.get('name');
 
     // This uses the ES2015 spread operator to pass properties as it is more DRY
     // This is equivalent to:
     // <HelloWorldWidget $$helloWorldStore={$$helloWorldStore} actions={actions} />
     return (
-      <HelloWorldWidget {...{ $$helloWorldStore, actions }} />
+      <HelloWorldWidget {...{ updateName, name }} />
     );
   }
 }

data/lib/generators/react_on_rails/templates/redux/base/client/app/bundles/HelloWorld/reducers/helloWorldReducer.jsx

@@ -10,10 +10,10 @@ export default function helloWorldReducer($$state = $$initialState, action) {
   const { type, name } = action;
 
   switch (type) {
-  case actionTypes.HELLO_WORLD_NAME_UPDATE:
-    return $$state.set('name', name);
+    case actionTypes.HELLO_WORLD_NAME_UPDATE:
+      return $$state.set('name', name);
 
-  default:
-    return $$state;
+    default:
+      return $$state;
   }
 }

data/lib/generators/react_on_rails/templates/ruby_linters/{ruby-lint.yml → ruby-lint.yml.tt}

@@ -1,9 +1,15 @@
+# Not currently using ruby-lint
+---
 presenter: syntastic
 
+# Be sure to edit this per your project!
 directories:
   - app
   - config
+  - lib
+  <%- if dest_dir_exists?("spec") -%>
   - spec
+  <%- end -%>
 
 ignore_paths:
   - client

data/lib/react_on_rails/version.rb

@@ -1,3 +1,3 @@
 module ReactOnRails
-  VERSION = "2.0.0.rc.1"
+  VERSION = "2.0.0.rc.3"
 end

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-on-rails",
-  "version": "2.0.0-beta.3",
+  "version": "2.0.0-rc.1",
   "description": "react-on-rails JavaScript for react_on_rails Ruby gem",
   "main": "node_package/lib/ReactOnRails.js",
   "directories": {
@@ -11,7 +11,7 @@
     "babel": "^6.3.13",
     "babel-cli": "^6.3.17",
     "babel-core": "^6.3.17",
-    "babel-eslint": "^5.0.0-beta4",
+    "babel-eslint": "^5.0.0-beta6",
     "babel-loader": "^6.2.0",
     "babel-plugin-transform-runtime": "^6.3.13",
     "babel-preset-es2015": "^6.3.13",
@@ -22,12 +22,14 @@
     "babelify": "^7.2.0",
     "blue-tape": "^0.1.11",
     "eslint": "^1.10.3",
-    "eslint-config-airbnb": "^2.0.0",
+    "eslint-config-airbnb": "^2.1.1",
+    "eslint-config-shakacode": "0.0.1",
     "eslint-plugin-babel": "^3.0.0",
     "eslint-plugin-react": "^3.11.3",
     "jscs": "^2.6.0",
     "react": "^0.14.3",
     "react-dom": "^0.14.3",
+    "react-transform-hmr": "^1.0.1",
     "tap-spec": "^4.1.1",
     "tape": "^4.4.0",
     "webpack": "^1.12.9"