react_on_rails 1.0.1 → 1.0.2

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

@@ -1,11 +1,9 @@
 // This file is used by the webpack HMR dev server to load your component without using Rails
 // It should simply match routes to basic HTML or jade files that render your component
 /* eslint-disable no-console, func-names, no-var */
-var bodyParser = require('body-parser');
 var webpack = require('webpack');
 var WebpackDevServer = require('webpack-dev-server');
 var jade = require('jade');
-var sleep = require('sleep');
 var config = require('./webpack.client.hot.config');
 
 var server = new WebpackDevServer(webpack(config), {
@@ -21,6 +19,14 @@ var server = new WebpackDevServer(webpack(config), {
   },
 });
 
+// The following code is commented out because the HelloWorld example
+// does not use any asynchronous functionality. It is meant to serve
+// as an example of how one might implement an API in express for their
+// webpack dev server
+// Note, it would be necessary to run `npm i --save body-parser sleep` for
+// the following to work:
+// var bodyParser = require('body-parser');
+// var sleep = require('sleep');
 // See tutorial for example of using AJAX:
 // https://github.com/shakacode/react-webpack-rails-tutorial
 

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

@@ -1,3 +1,4 @@
+<%- client_globals_name = options.server_rendering? ? "clientGlobals" : "globals" -%>
 // Common client-side webpack configuration used by webpack.hot.config and webpack.rails.config.
 
 const webpack = require('webpack');
@@ -20,7 +21,7 @@ module.exports = {
 
     // This will contain the app entry points defined by webpack.hot.config and webpack.rails.config
     app: [
-      './app/bundles/HelloWorld/startup/clientGlobals',
+      './app/bundles/HelloWorld/startup/<%= client_globals_name %>',
     ],
   },
   resolve: {

data/lib/generators/react_on_rails/templates/base/base/config/initializers/react_on_rails.rb

@@ -4,9 +4,7 @@ ReactOnRails.configure do |config|
 
   # Server rendering:
   # Server bundle is a single file for all server rendering of components.
-  # It is important to set this to "" if you are not doing server rendering to avoid an extraneous log warning
-  # that the default file of server-bundle.js does not exist.
-  config.server_bundle_js_file = "app/assets/javascripts/generated/server-bundle.js" # This is the default
+  config.server_bundle_js_file = "app/assets/javascripts/generated/server-bundle.js"
   # increase if you're on JRuby
   config.server_renderer_pool_size = 1
   # seconds

data/lib/generators/react_on_rails/templates/base/base/lib/tasks/assets.rake

@@ -19,8 +19,6 @@ namespace :assets do
   end
 
   task :clobber do
-    rm_rf "#{Rails.application.config.root}/app/assets/javascripts/generated/vendor-bundle.js"
-    rm_rf "#{Rails.application.config.root}/app/assets/javascripts/generated/client-bundle.js"
-    rm_rf "#{Rails.application.config.root}/app/assets/javascripts/generated/server-bundle.js"
+    rm_r Dir.glob(Rails.root.join("app/assets/javascripts/generated/*"))
   end
 end

data/lib/generators/react_on_rails/templates/{linters/lib/tasks/linters.rake → base/base/lib/tasks/linters.rake.tt}

@@ -1,5 +1,6 @@
 if %w(development test).include? Rails.env
   namespace :lint do
+    <%- if options.ruby_linters? -%>
     # This fails: https://github.com/bbatsov/rubocop/issues/1840
     # RuboCop::RakeTask.new
     # require "rubocop/rake_task"
@@ -24,23 +25,17 @@ if %w(development test).include? Rails.env
       sh cmd
     end
 
-    desc "eslint"
-    task :eslint do
-      cmd = "cd client && npm run eslint . -- --ext .jsx,.js"
-      puts "Running eslint via `#{cmd}`"
-      sh cmd
-    end
-
-    desc "jscs"
-    task :jscs do
-      cmd = "cd client && npm run jscs ."
-      puts "Running jscs via `#{cmd}`"
-      sh cmd
-    end
-
-    desc "JS Linting"
-    task js: [:eslint, :jscs] do
-      puts "Completed running all JavaScript Linters"
+    desc "See docs for task 'scss_lint'"
+    task :scss do
+      begin
+        require 'scss_lint/rake_task'
+        SCSSLint::RakeTask.new do |t|
+          t.files = ["app/assets/stylesheets/", "client/assets/stylesheets/"]
+        end
+        Rake::Task[:scss_lint].invoke
+      rescue LoadError
+        puts "** add gem 'scss_lint' to your Gemfile for scss linting."
+      end
     end
 
     # desc "haml_lint"
@@ -58,20 +53,32 @@ if %w(development test).include? Rails.env
     #   t.files = ["app/views"]
     # end
 
-    desc "See docs for task 'scss_lint'"
-    task :scss do
-      begin
-        require 'scss_lint/rake_task'
-        SCSSLint::RakeTask.new do |t|
-          t.files = ["app/assets/stylesheets/", "client/assets/stylesheets/"]
-        end
-        Rake::Task[:scss_lint].invoke
-      rescue LoadError
-        puts "** add gem 'scss_lint' to your Gemfile for scss linting."
-      end
+    <%- end -%>
+    <%- unless options.skip_js_linters? -%>
+    desc "eslint"
+    task :eslint do
+      cmd = "cd client && npm run eslint . -- --ext .jsx,.js"
+      puts "Running eslint via `#{cmd}`"
+      sh cmd
+    end
+
+    desc "jscs"
+    task :jscs do
+      cmd = "cd client && npm run jscs ."
+      puts "Running jscs via `#{cmd}`"
+      sh cmd
+    end
+
+    desc "JS Linting"
+    task js: [:eslint, :jscs] do
+      puts "Completed running all JavaScript Linters"
     end
+    <%- end -%>
 
-    task lint: [:rubocop, :ruby, :js, :scss] do
+    <%- enabled_linters = [] -%>
+    <%- enabled_linters << %i(rubocop, ruby) if options.ruby_linters? -%>
+    <%- enabled_linters << %i(js scss) unless options.skip_js_linters? -%>
+    task lint: <%= enabled_linters.flatten %> do
       puts "Completed all linting"
     end
   end

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

@@ -0,0 +1,12 @@
+<%- component_name = options.server_rendering? ? "HelloWorldAppClient" : "HelloWorldApp" -%>
+import React from 'react';
+import HelloWorld from '../containers/HelloWorld';
+
+const <%= component_name %> = props => {
+  const reactComponent = (
+    <HelloWorld {...props} />
+  );
+  return reactComponent;
+};
+
+export default <%= component_name %>;

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

@@ -1,7 +1,7 @@
 // This file is our manifest of all reducers for the app.
-// See /client/app/bundles/HelloWorld/store/helloWorldStore.jsx
+// See also /client/app/bundles/HelloWorld/store/helloWorldStore.jsx
 // A real world app will like have many reducers and it helps to organize them in one file.
-// See `docs/generators/reducers.md` at https://github.com/shakacode/react_on_rails
+// `https://github.com/shakacode/react_on_rails/tree/master/docs/additional_reading/generated_client_code.md`
 import helloWorldReducer from './helloWorldReducer';
 import { $$initialState as $$helloWorldState } from './helloWorldReducer';
 

data/lib/generators/react_on_rails/templates/redux/base/client/app/bundles/HelloWorld/startup/{HelloWorldAppClient.jsx → HelloWorldAppClient.jsx.tt}

@@ -1,3 +1,4 @@
+<%- generator_function_name = options.server_rendering? ? "HelloWorldAppClient" : "HelloWorldApp" -%>
 import React from 'react';
 import { Provider } from 'react-redux';
 
@@ -7,7 +8,7 @@ import HelloWorld from '../containers/HelloWorld';
 // See documentation for https://github.com/rackt/react-redux.
 // This is how you get props from the Rails view into the redux store.
 // This code here binds your smart component to the redux store.
-const HelloWorldAppClient = props => {
+const <%= generator_function_name %> = props => {
   const store = createStore(props);
   const reactComponent = (
     <Provider store={store}>
@@ -17,4 +18,4 @@ const HelloWorldAppClient = props => {
   return reactComponent;
 };
 
-export default HelloWorldAppClient;
+export default <%= generator_function_name %>;

data/lib/generators/react_on_rails/templates/redux/base/client/app/lib/middlewares/loggerMiddleware.js

@@ -10,13 +10,9 @@ export default function logger({ getState }) {
     // Call the next dispatch method in the middleware chain.
     const result = next(action);
 
-    // We can't console.log immutable objects out-of-the-box.
     const immutableState = getState();
-    const readableState = _.reduce(immutableState, (result, immutable, key) => {
-      result[key] = immutable.toJS();
-    }, {});
 
-    console.log('state after dispatch', readableState);
+    console.log('state after dispatch', JSON.stringify(immutableState));
 
     // This will likely be the action itself, unless
     // a middleware further in chain changed it.

data/lib/generators/react_on_rails/templates/ruby_linters/.rubocop.yml

@@ -0,0 +1,26 @@
+# This is the configuration used to check the rubocop source code.
+# Check out: https://github.com/bbatsov/rubocop
+
+AllCops:
+  Include:
+    - '**/Rakefile'
+    - '**/config.ru'
+  Exclude:
+    - 'vendor/**/*'
+    - 'spec/fixtures/**/*'
+    - 'node_modules/**/*'
+    - 'db/**/*'
+    - 'db/schema.rb'
+    - 'db/seeds.rb'
+    - 'client/node_modules/**/*'
+    - 'bin/**/*'
+    - !ruby/regexp /old_and_unused\.rb$/
+
+Metrics/LineLength:
+  Max: 120
+
+Style/StringLiterals:
+  EnforcedStyle: double_quotes
+
+Style/Documentation:
+  Enabled: false

data/lib/generators/react_on_rails/templates/ruby_linters/.scss-lint.yml

@@ -0,0 +1,205 @@
+# See http://sass-guidelin.es/#zeros
+
+scss_files:
+  - 'app/assets/stylesheets/**/*.scss'
+  - 'client/assets/stylesheets/**/*.scss'
+
+linters:
+#  BangFormat:
+#    enabled: true
+#    space_before_bang: true
+#    space_after_bang: false
+#
+#  BorderZero:
+#    enabled: true
+#    convention: zero # or `none`
+#
+  ColorKeyword:
+    enabled: false
+  ColorVariable:
+    enabled: false
+#
+#  Comment:
+#    enabled: true
+#
+#  DebugStatement:
+#    enabled: true
+#
+#  DeclarationOrder:
+#    enabled: true
+#
+#  DuplicateProperty:
+#    enabled: true
+#
+#  ElsePlacement:
+#    enabled: true
+#    style: same_line # or 'new_line'
+#
+#  EmptyLineBetweenBlocks:
+#    enabled: true
+#    ignore_single_line_blocks: true
+#
+#  EmptyRule:
+#    enabled: true
+#
+#  FinalNewline:
+#    enabled: true
+#    present: true
+#
+  HexLength:
+    enabled: true
+    style: long
+
+  HexNotation:
+    enabled: true
+    style: uppercase
+#
+#  HexValidation:
+#    enabled: true
+#
+  IdSelector:
+    enabled: true
+#
+#  ImportantRule:
+#    enabled: true
+#
+#  ImportPath:
+#    enabled: true
+#    leading_underscore: false
+#    filename_extension: false
+#
+#  Indentation:
+#    enabled: true
+#    allow_non_nested_indentation: false
+#    character: space # or 'tab'
+#    width: 2
+#
+  LeadingZero:
+    enabled: true
+    style: include_zero
+#
+#  MergeableSelector:
+#    enabled: true
+#    force_nesting: true
+#
+#  NameFormat:
+#    enabled: true
+#    allow_leading_underscore: true
+#    convention: hyphenated_lowercase # or 'camel_case', or 'snake_case', or a regex pattern
+#
+#  NestingDepth:
+#    enabled: true
+#    max_depth: 3
+#
+#  PlaceholderInExtend:
+#    enabled: true
+#
+#  PropertyCount:
+#    enabled: false
+#    include_nested: false
+#    max_properties: 10
+#
+#  PropertyUnits:
+#    enabled: true
+#    global: [
+#      'ch', 'em', 'ex', 'rem',                 # Font-relative lengths
+#      'cm', 'in', 'mm', 'pc', 'pt', 'px', 'q', # Absolute lengths
+#      'vh', 'vw', 'vmin', 'vmax',              # Viewport-percentage lengths
+#      'deg', 'grad', 'rad', 'turn',            # Angle
+#      'ms', 's',                               # Duration
+#      'Hz', 'kHz',                             # Frequency
+#      'dpi', 'dpcm', 'dppx',                   # Resolution
+#      '%',                                     # Other
+#    ]
+#    properties: {}
+#
+#  PropertySortOrder:
+#    enabled: true
+#    ignore_unspecified: false
+#    separate_groups: false
+#
+#  PropertySpelling:
+#    enabled: true
+#    extra_properties: []
+#
+#  QualifyingElement:
+#    enabled: true
+#    allow_element_with_attribute: false
+#    allow_element_with_class: false
+#    allow_element_with_id: false
+#
+#  SelectorDepth:
+#    enabled: true
+#    max_depth: 3
+#
+#  SelectorFormat:
+#    enabled: true
+#    convention: hyphenated_lowercase # or 'strict_BEM', or 'hyphenated_BEM', or 'snake_case', or 'camel_case', or a regex pattern
+#
+#  Shorthand:
+#    enabled: true
+#    allowed_shorthands: [1, 2, 3]
+#
+#  SingleLinePerProperty:
+#    enabled: true
+#    allow_single_line_rule_sets: true
+#
+#  SingleLinePerSelector:
+#    enabled: true
+#
+#  SpaceAfterComma:
+#    enabled: true
+#
+#  SpaceAfterPropertyColon:
+#    enabled: true
+#    style: one_space # or 'no_space', or 'at_least_one_space', or 'aligned'
+#
+#  SpaceAfterPropertyName:
+#    enabled: true
+#
+#  SpaceBeforeBrace:
+#    enabled: true
+#    style: space # or 'new_line'
+#    allow_single_line_padding: false
+#
+#  SpaceBetweenParens:
+#    enabled: true
+#    spaces: 0
+#
+#  StringQuotes:
+#    enabled: true
+#    style: single_quotes # or double_quotes
+#
+#  TrailingSemicolon:
+#    enabled: true
+#
+#  TrailingZero:
+#    enabled: false
+#
+#  UnnecessaryMantissa:
+#    enabled: true
+#
+#  UnnecessaryParentReference:
+#    enabled: true
+#
+#  UrlFormat:
+#    enabled: true
+#
+#  UrlQuotes:
+#    enabled: true
+#
+#  VariableForProperty:
+#    enabled: false
+#    properties: []
+#
+#  VendorPrefix:
+#    enabled: true
+#    identifier_list: base
+#    additional_identifiers: []
+#    excluded_identifiers: []
+#
+#  ZeroUnit:
+#    enabled: true
+#
+#  Compass::*:
+#    enabled: false