react_on_rails 2.0.0.rc.3 → 2.0.0.rc.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: f249c2ba093b9c1f2099bb6b5d9be21c932023e1
-  data.tar.gz: 8fa0f6dae77949df12cdaea2d4e5bfe176e68bd6
+  metadata.gz: 00b3529c45b04826cc9f06735e62276563ddce94
+  data.tar.gz: 04d6beee91a23ebaba8161a828b5f1d8e20f34f5
 SHA512:
-  metadata.gz: 8217b7fa116f964384bcecfb176eeb9036ad990da12d545ec8a2d52d3bc36f0be9edf73b23d3311962748ab72f4f75dc6f41e9e99d4d6bc547785baa3751f079
-  data.tar.gz: 7d5ce3efd0ada7e7d9b722c6fb14e7cfa89466db9c58d95ff5773a7a6a929cf834ef95864749e080092878de8e50ce11de6974a10be8f93c9f278928730d7400
+  metadata.gz: 8d5d6aedc821b9ac2f7e3f53d1764413d7d42fdb48480edfa0833720bf3392075b8e228c697fd1caee841eebfca269bc793113b6775089728083c2aed15e86c1
+  data.tar.gz: f9944838c5cf645e5d00f19bf4846907572164428e89ec64b1afe9f75a6162ce43fd9a300be360f31134675455cea41248540e0cbf32405952cf875cd9a669b6

data/CHANGELOG.md

@@ -39,6 +39,17 @@ All notable changes to this project will be documented in this file. Items under
 - JS Linter uses ShakaCode JavaScript style: https://github.com/shakacode/style-guide-javascript 
 - Generators account these differences.
 
+### Migration Steps
+[Example of upgrading](https://github.com/shakacode/react-webpack-rails-tutorial/commit/5b1b8698e8daf0f0b94e987740bc85ee237ef608)
+
+1. Update the `react_on_rails` gem
+2. Search you app for 'generator_function' and remove lines in layouts and rb files that contain it. Determination of a generator function is handled automatically.
+3. Find your files where you registered client and server globals, and use the new ReactOnRails.register syntax. Optionally rename the files `clientRegistration.jsx` and `serverRegistration.jsx` rather than `Globals`.
+4. Update your index.jade to use the new API `ReactOnRails.render("MyApp", !{props}, 'app');`
+5. Update your webpack files per the example commit. Remove globally exposing React and ReactDom, as well as their inclusion in the `entry` section. These are automatically included now.
+
+That's it!
+
 ## v1.2.2
 ### Fixed
 - Missing Lodash from generated package.json [#175](https://github.com/shakacode/react_on_rails/pull/175)

data/docs/additional_reading/heroku_deployment.md

@@ -21,3 +21,49 @@ heroku buildpacks:set https://github.com/heroku/heroku-buildpack-multi
 Heroku will now be able to use the multiple buildpacks specified in `.buildpacks`. 
 
 Note, an alternative approach is to use the [Heroku Toolbelt to set buildpacks](https://devcenter.heroku.com/articles/using-multiple-buildpacks-for-an-app).
+
+## Fresh Rails Install
+
+### Swap out sqlite for postgres by doing the following:
+
+1. Delete the line with `sqlite` and replace it with:
+
+```ruby
+   gem 'pg'
+```
+
+2. Replace your `database.yml` file with this (assuming your app name is "ror")
+
+```yml
+default: &default
+  adapter: postgresql
+  username:
+  password:
+  host: localhost
+
+development:
+  <<: *default
+  database: ror_development
+
+# Warning: The database defined as "test" will be erased and
+# re-generated from your development database when you run "rake".
+# Do not set this db to the same as development or production.
+test:
+  <<: *default
+  database: ror_test
+
+production:
+  <<: *default
+  database: ror_production
+```
+
+Run:
+
+```
+bundle
+bin/rake db:migrate
+bin/rake db:setup
+```
+
+
+

data/docs/additional_reading/manual_installation.md

@@ -74,7 +74,7 @@ module.exports = {
     //libraryTarget: 'this',
   },
   resolve: {
-    extensions: ['', '.webpack.js', '.web.js', '.js', '.jsx', 'config.js'],
+    extensions: ['', '.js', '.jsx'],
   },
   module: {
     loaders: [

data/docs/coding-style/linters.md

@@ -58,7 +58,7 @@ You can disable all rules for a line or block, or only specific rules, as shown
 
 * [Configuring ESLint](http://eslint.org/docs/user-guide/configuring.html#configuring-rules)
 * [ESLint quick start](http://untilfalse.com/eslint-quick-start/)
-* [RuboCop][https://github.com/bbatsov/rubocop]
-* [ESLint][http://eslint.org/] 
-* [JSCS][https://github.com/jscs-dev/node-jscs]
+* [RuboCop](https://github.com/bbatsov/rubocop)
+* [ESLint](http://eslint.org/)
+* [JSCS](https://github.com/jscs-dev/node-jscs)
 

data/docs/coding-style/style.md

@@ -6,26 +6,18 @@ This document describes the coding style of [ShakaCode](http://www.shakacode.com
 * Anything additional goes next.
 
 ## Client Side JavaScript and React
-* Use [Redux](https://github.com/rackt/redux) for your flux store.
-* Use [Lodash](https://lodash.com/) rather than Underscore.
-* Place all JavaScript for the client app in `/client`
-* Organize your app into high level domains which map to JavaScript bundles. These are like mini-apps that live within your entire app. Create directories named like `/client/app/<bundle>` and configure Webpack to generate different corresponding bundles.
-* Carefully organize your React components into [Smart and Dumb Components](https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0#.ygdkh1l7b):
-   1. "dumb" components that live in the `/client/app/<bundle>/components/` directories. These components should take props, including values and callbacks, and should not talk directly to Redux or any AJAX endpoints.
-   2. "smart" components that live in the `/client/app/<bundle>/containers/` directory. These components will talk to the Redux store and AJAX endpoints.
-* Place common code shared across bundles in `/client/app/libs` and configure Webpack to generate a common bundle for this one.
-* Prefix Immutable.js variable names and properties with `$$`. By doing this, you will clearly know that you are dealing with an Immutable.js object and not a standard JavaScript Object or Array.
-* Use ES6 classes rather than `React.createClass`.
-* Bind callbacks passed to react components with `_.bindAll` in the constructor unless you need to bind additional parameters. In that case, you can call `_.bind` within the rendering.
+* See the [Shakacode JavaScript Style Guide](https://github.com/shakacode/style-guide-javascript)
 
 ## Style Guides to Follow
 Follow these style guidelines per the linter configuration. Basically, lint your code and if you have questions about the suggested fixes, look here:
 
 ### Ruby Coding Standards
-* [RailsOnMaui Ruby Coding Standards](https://github.com/justin808/ruby)
+* [ShakaCode Ruby Coding Standards](https://github.com/shakacode/style-guide-ruby)
 * [Ruby Documentation](http://guides.rubyonrails.org/api_documentation_guidelines.html)
 
 ### JavaScript Coding Standards
+* [ShakaCode Javascript](https://github.com/shakacode/style-guide-javascript)
+* Use the [eslint-config-shakacode](https://github.com/shakacode/style-guide-javascript/tree/master/packages/eslint-config-shakacode) npm package with eslint.
 * [AirBnb Javascript](https://github.com/airbnb/javascript)
 * [JSDoc](http://usejsdoc.org/)
 

data/docs/rails3.md

@@ -0,0 +1,7 @@
+# Rails 3
+
+Please let us know if you find any issues with Rails 3. 
+
+## Known Issues
+
+1. If you do not skip bootstrap for the generator, you cannot generate a working app, as bootstrap-sass does not not support Rails 3, or at least the version we're using.

data/docs/tutorial-v2.md

@@ -0,0 +1,210 @@
+I just released RC3 of [React On Rails](https://github.com/shakacode/react_on_rails/tree/npm-react-on-rails-js). Here's a tiny tutorial to get you started. This tutorial setups up a new Rails app with **React on Rails**, demonstrating Rails + React + Redux + Server Rendering.
+
+You can find:
+
+* [Source code for this sample app](https://github.com/justin808/test-react-on-rails-3)
+* [Live on Heroku](https://shakacode-react-on-rails.herokuapp.com/hello_world)
+
+By the time you read this, the latest may have changed. Be sure to check the versions here:
+
+* https://rubygems.org/gems/react_on_rails
+* https://www.npmjs.com/package/react-on-rails
+
+Trying out v2 is super easy, so long as you have the basic prerequisites. This includes the basics for Rails 4.x and node version 4+. I recommend `rvm` and `nvm` to install Ruby and Node.
+
+```
+cd <directory where you want to create your new Rails app>
+# any name you like
+rails new test-react-on-rails-3
+cd test-react-on-rails-3
+# git-extras command to make a new git repo and commit everything
+git setup
+vim Gemfile
+```
+
+Add this line to your Gemfile:
+
+```
+gem 'react_on_rails', '~> 2.0.0.rc.3'
+```
+
+<img src="http://forum.shakacode.com/uploads/default/original/1X/fb2c41941cdc2b6cdfcc563f8a837a9cf5a51cec.png" width="482" height="113">
+
+```
+bundle
+bundle exec rails generate react_on_rails:install -R -S -H -L
+bundle && npm i
+npm run rails-server
+```
+
+* R => Redux
+* S => Server Rendering
+* H => Heroku setup
+* L => Linters
+
+
+Visit http://localhost:3000/hello_world and see your React On Rails app running!
+
+```
+npm run node-server-hot
+```
+
+<img src="http://forum.shakacode.com/uploads/default/original/1X/5bd396a7f9c0764929b693fb79eb6685ec6f62cf.png" width="470" height="499">
+
+Visit http://localhost:4000 and see your React On Rails app running using the Webpack Dev server.
+
+With this setup, you can make changes to your JS or CSS and the browser will hot reload the changes (no page refresh required).
+
+I'm going to add this line to:
+
+```html
+<h1>Welcome to React On Rails!</h1>
+```
+
+<img src="http://forum.shakacode.com/uploads/default/original/1X/d20719a52541e95ddd968a95192d3247369c3bf6.png" width="498" height="500">
+
+If you save, you'll soon see this screen:
+
+<img src="http://forum.shakacode.com/uploads/default/original/1X/228706a99a411548a4539f72446d3f115ed36f95.png" width="555" height="500">
+
+
+If you're motivated to try the linting setup, you'll want to run the following commands:
+
+     bin/rake lint
+
+You'll see a few rubocop errors.
+
+    rubocop -a
+
+That will fix almost all the errors. However, the linter setup expects you to have rspec (small bug currently). These two commands address that issue:
+
+```
+rm -rf test
+mkdir spec
+```
+
+    bin/rake lint
+
+The edit `application.scss`. Delete the comment at the top.
+
+    bin/rake lint
+
+You should see 
+
+```
+bin/rake lint                                                                                                                                                                                                   
+
+Running via Spring preloader in process 26674
+Running Rubocop Linters via `rubocop -S -D .`
+rubocop -S -D .
+Warning: Deprecated pattern style '/Users/justin/scratch/test-react-on-rails-3/client/node_modules/**/*' in /Users/justin/scratch/test-react-on-rails-3/.rubocop.yml
+Inspecting 22 files
+......................
+
+22 files inspected, no offenses detected
+Running ruby-lint Linters via `ruby-lint app config spec lib`
+ruby-lint app config spec lib
+scss-lint found no lints
+Running eslint via `cd client && npm run eslint . -- --ext .jsx,.js`
+cd client && npm run eslint . -- --ext .jsx,.js
+
+> react-webpack-rails-tutorial@1.1.0 eslint /Users/justin/scratch/test-react-on-rails-3/client
+> eslint --ext .js,.jsx . "." "--ext" ".jsx,.js"
+
+Running jscs via `cd client && npm run jscs .`
+cd client && npm run jscs .
+
+> react-webpack-rails-tutorial@1.1.0 jscs /Users/justin/scratch/test-react-on-rails-3/client
+> jscs --verbose . "."
+
+Completed running all JavaScript Linters
+Completed all linting
+```
+
+## RubyMine
+
+It's super important to exclude certain directories from RubyMine or else it will slow to a crawl as it tries to parse all the npm files.
+
+* `app/assets/javascripts/generated`
+* `client/node_modules`
+
+<img src="http://forum.shakacode.com/uploads/default/original/1X/a1b3e1146d86915f7d5d1c89548e81ec208458cc.png" width="338" height="500">
+
+
+## Deploying to Heroku
+
+### Create Your Heroku App
+*Assuming you can login to heroku.com and have logged into to your shell for heroku.*
+
+1. Visit https://dashboard.heroku.com/new and create an app, say named `my-name-react-on-rails`:
+
+<img src="http://forum.shakacode.com/uploads/default/original/1X/2d1b6abc40eef8e411e84d2679de91353f617567.png" width="690" height="319">
+
+Run this command that looks like this from your new heroku app
+
+    heroku git:remote -a my-name-react-on-rails
+
+Set the correct buildpack for using react-on-rails:
+
+    heroku buildpacks:set https://github.com/heroku/heroku-buildpack-multi
+
+
+### Swap out sqlite for postgres by doing the following:
+
+1. Delete the line with `sqlite` and replace it with:
+
+```ruby
+   gem 'pg'
+```
+
+2. Replace your `database.yml` file with this (assuming your app name is "ror").
+
+```yml
+default: &default
+  adapter: postgresql
+  username:
+  password:
+  host: localhost
+
+development:
+  <<: *default
+  database: ror_development
+
+# Warning: The database defined as "test" will be erased and
+# re-generated from your development database when you run "rake".
+# Do not set this db to the same as development or production.
+test:
+  <<: *default
+  database: ror_test
+
+production:
+  <<: *default
+  database: ror_production
+```
+
+Then you need to setup postgres so you can run locally:
+
+```
+bundle
+bin/rake db:migrate
+bin/rake db:setup
+```
+
+I'd recommend adding this line to the top of your `routes.rb`. That way, your root page will go to the Hello World page for React On Rails.
+
+```ruby
+root "hello_world#index"
+```
+
+You can see the changes [here on github](https://github.com/justin808/test-react-on-rails-3/commit/09909433c186566a53f611e8b1cfeca3238f5266).
+
+Then push your app to Heroku!
+
+    git push heroku master
+
+Here's mine:
+
+* [Source code for this sample app](https://github.com/justin808/test-react-on-rails-3)
+* [Live on Heroku](https://shakacode-react-on-rails.herokuapp.com/hello_world)
+
+Feedback is greatly appreciated! As are stars on github!

data/lib/generators/USAGE

@@ -94,6 +94,23 @@ are such that the default is for the flag to be off. For example, the default fo
 
     We really love using all the linters! Give them a try.
 
+*******************************************************************************
+
+After running the generator, you will want to:
+
+    bundle && npm i
+
+Then you may run
+
+    npm run
+
+And you will see several useful commands:
+
+  node-server-hot
+    echo 'visit http://localhost:4000' && cd client && npm start
+  rails-server
+    echo 'visit http://localhost:3000/hello_world' && foreman start -f Procfile.dev
+
 More Details:
 
     `https://github.com/shakacode/react_on_rails#generator`

data/lib/generators/react_on_rails/bootstrap_generator.rb

@@ -52,11 +52,7 @@ module ReactOnRails
 
         application_scss = File.join(destination_root, "app/assets/stylesheets/application.scss")
 
-        if File.exist?(application_scss)
-          append_to_file(application_scss, data)
-        else
-          GeneratorMessages.add_error(setup_file_error(application_scss, data))
-        end
+        append_to_file(application_scss, data)
       end
 
       def strip_application_scss_of_incompatible_sprockets_statements

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

@@ -16,8 +16,6 @@ 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
@@ -26,7 +24,7 @@ module.exports = {
     ],
   },
   resolve: {
-    extensions: ['', '.webpack.js', '.web.js', '.js', '.jsx', '.scss', '.css', 'config.js'],
+    extensions: ['', '.js', '.jsx'],
     alias: {
       lib: path.join(process.cwd(), 'app', 'lib'),
       react: path.resolve('./node_modules/react'),
@@ -34,7 +32,6 @@ module.exports = {
     },
   },
   plugins: [
-
     new webpack.DefinePlugin({
       'process.env': {
         NODE_ENV: JSON.stringify(nodeEnv),

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

@@ -25,8 +25,19 @@ 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',
+  },
+  {
+    test: require.resolve('jquery-ujs'),
+    loader: 'imports?jQuery=jquery',
+  }
 );
 
 module.exports = config;

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

@@ -10,9 +10,8 @@
   "scripts": {
     "postinstall": "cd client && npm install",
     "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"
+    "node-server-hot": "echo 'visit http://localhost:4000' && cd client && npm start",
+    "rails-server": "echo 'visit http://localhost:3000/hello_world' && foreman start -f Procfile.dev"
   },
   "repository": {
     "type": "git",

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

@@ -19,7 +19,7 @@ module.exports = {
     path: '../app/assets/javascripts/generated',
   },
   resolve: {
-    extensions: ['', '.webpack.js', '.web.js', '.js', '.jsx', 'config.js'],
+    extensions: ['', '.js', '.jsx'],
     alias: {
       lib: path.join(process.cwd(), 'app', 'lib'),
     },

data/lib/react_on_rails/configuration.rb

@@ -1,4 +1,3 @@
-require_relative "version_checker"
 
 module ReactOnRails
   def self.configure
@@ -6,7 +5,6 @@ module ReactOnRails
   end
 
   def self.configuration
-    VersionChecker.warn_if_gem_and_node_package_versions_differ
     @configuration ||= Configuration.new(
       server_bundle_js_file: "app/assets/javascripts/generated/server.js",
       prerender: false,

data/lib/react_on_rails/engine.rb

@@ -1,6 +1,11 @@
+require_relative "version_checker"
+
 module ReactOnRails
   class Engine < ::Rails::Engine
     config.to_prepare do
+      if File.exist?(VersionChecker::NodePackageVersion.package_json_path)
+        VersionChecker.build.warn_if_gem_and_node_package_versions_differ
+      end
       ReactOnRails::ServerRenderingPool.reset_pool
     end
   end

data/lib/react_on_rails/version.rb

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

data/lib/react_on_rails/version_checker.rb

@@ -1,51 +1,85 @@
 require_relative "version"
 
 module ReactOnRails
-  module VersionChecker
-    # TODO: ROB
-    # parse the client/package.json and ensure that either:
-    # 1. version number matches
-    # 2. version number is a relative path (for testing)
-    # Throw error if not.
-    # Allow skipping this check in the configuration in case somebody has a wacky configuration, such
-    # as you don't know where their package.json
+  class VersionChecker
+    attr_reader :node_package_version, :logger
+
+    def self.build
+      new(NodePackageVersion.build, Rails.logger)
+    end
+
+    def initialize(node_package_version, logger)
+      @logger = logger
+      @node_package_version = node_package_version
+    end
 
     # For compatibility, the gem and the node package versions should always match, unless the user
     # really knows what they're doing. So we will give a warning if they do not.
-    def self.warn_if_gem_and_node_package_versions_differ
-      return unless node_package_version_is_standard_version_number? &&
-                    gem_version != node_package_version
-      msg = "**WARNING** ReactOnRails: ReactOnRails gem and node package versions do not match\n" \
-            "                     gem: #{gem_version}\n" \
-            "            node package: #{node_package_version}\n" \
-            "Ensure the installed version of the gem is the same as the version of your installed node package"
-      puts(msg)
-      Rails.logger.warn(msg)
+    def warn_if_gem_and_node_package_versions_differ
+      return if node_package_version.major == gem_major_version || node_package_version.relative_path?
+      log_differing_versions_warning
     end
 
     private
 
-    def self.gem_version
-      ReactOnRails::VERSION
+    def log_differing_versions_warning
+      msg = "**WARNING** ReactOnRails: ReactOnRails gem and node package MAJOR versions do not match\n" \
+            "                     gem: #{gem_version}\n" \
+            "            node package: #{node_package_version.raw}\n" \
+            "Ensure the installed MAJOR version of the gem is the same as the MAJOR version of \n"\
+            "your installed node package."
+      logger.warn(msg)
     end
 
-    # Warning: we replace all hyphens with periods for normalization purposes
-    def self.node_package_version
-      return unless client_package_json.present? && File.exist?(client_package_json)
-      contents = File.read(client_package_json)
-      raw_version = contents.match(/"react-on-rails": "(.*)",/)[1]
-      raw_version.tr("-", ".")
+    def gem_version
+      ReactOnRails::VERSION
     end
 
-    def self.client_package_json
-      return unless Rails.root.present?
-      Rails.root.join("client", "package.json")
+    def gem_major_version
+      gem_version.match(/(\d+)\./)[1]
     end
 
-    # Basically this means "not a relative path" as we don't want warn the user
-    # if they are purposely doing some wacky configuration.
-    def self.node_package_version_is_standard_version_number?
-      node_package_version =~ (/\d+\.\d+\.\d+(\..+\.\d+)?/)
+    class NodePackageVersion
+      attr_reader :package_json
+
+      def self.build
+        new(package_json_path)
+      end
+
+      def self.package_json_path
+        Rails.root.join("client", "package.json")
+      end
+
+      def initialize(package_json)
+        @package_json = package_json
+      end
+
+      def raw
+        JSON.parse(package_json_contents)["dependencies"]["react-on-rails"]
+      end
+
+      def normalized
+        match = raw
+                .tr("-", ".")
+                .strip
+                .match(/(\d.*)/)
+        match.present? ? match[0] : nil
+      end
+
+      def relative_path?
+        normalized.nil? # must be a relative path if nil and we haven't failed
+      end
+
+      def major
+        return if normalized.nil?
+        normalized.match(/(\d+)\./)[1]
+      end
+
+      private
+
+      def package_json_contents
+        @package_json_contents ||= File.read(package_json)
+      end
     end
   end
 end

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-on-rails",
-  "version": "2.0.0-rc.1",
+  "version": "2.0.0-rc.4",
   "description": "react-on-rails JavaScript for react_on_rails Ruby gem",
   "main": "node_package/lib/ReactOnRails.js",
   "directories": {

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: react_on_rails
 version: !ruby/object:Gem::Version
-  version: 2.0.0.rc.3
+  version: 2.0.0.rc.4
 platform: ruby
 authors:
 - Justin Gordon
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2016-01-10 00:00:00.000000000 Z
+date: 2016-01-14 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: connection_pool
@@ -302,7 +302,9 @@ files:
 - docs/coding-style/style.md
 - docs/contributing.md
 - docs/generator_testing.md
+- docs/rails3.md
 - docs/releasing.md
+- docs/tutorial-v2.md
 - lib/generators/USAGE
 - lib/generators/react_on_rails/base_generator.rb
 - lib/generators/react_on_rails/bootstrap_generator.rb