react_on_rails 1.1.1 → 1.2.0.rc1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 4ec601fd7a8ddbadbe47c0293045aa5cfb372172
-  data.tar.gz: 8416f87f0edaca37fe579318312b8e55da00a070
+  metadata.gz: 0cb4379ac90c02126dfcab3c5be352db3e02d2c0
+  data.tar.gz: f0f2baf8c27160f8dcc7ad6d877935734ebff3c9
 SHA512:
-  metadata.gz: 68af87cb975272a0607689d5207f7cf53d49c04b141adac278f7aaa6038e6c86c4c5d2c962dc6733cc5a6fa1b70cb9f1f8cd424262f7c70a4a6f43eb7f3ffe4f
-  data.tar.gz: 052141635f38970e32898fba7bb3aa87fa2f6ea5918f18f1cd9ce577d616ce1098717beac514363b8d09b09423386df1f8fda9b78ae5b6296624d6f07a0b67b1
+  metadata.gz: 02f567c3a9f6b4712d8d9ca2671596ca63cadaf427b7272445aa2aa2aaebcb2558d267f4f3e1c3da3a84208a57d016a2666d9d0bfba21cc2e33d3cb84b1f4aec
+  data.tar.gz: f0ff60e1e71582b805071affe7c91d8139f50ef0976587d446f8fd1dd08ea370d497ebb766380e3cc6723d01d677d11f4a5685a500a7a4f164aeb88c865fa454

data/.gitignore

@@ -23,3 +23,4 @@
 .ruby-gemset
 
 node_modules
+examples

data/.rubocop.yml

@@ -17,6 +17,7 @@ AllCops:
     - 'bin/**/*'
     - !ruby/regexp /old_and_unused\.rb$/
     - 'spec/react_on_rails/dummy-for-generators/**/*'
+    - 'examples/**/*'
 
 Metrics/LineLength:
   Max: 120

data/.travis.yml

@@ -25,13 +25,8 @@ install:
   - rm -rf ~/.nvm && git clone https://github.com/creationix/nvm.git ~/.nvm && (cd ~/.nvm && git checkout `git describe --abbrev=0 --tags`) && source ~/.nvm/nvm.sh && nvm install 4.2.0
   - npm install -g npm
   - bundle install
-  - cd spec/dummy/client && npm install
-  - $(npm bin)/webpack --config webpack.server.js
-  - $(npm bin)/webpack --config webpack.client.js
-  - cd ../../dummy-react-013/client && npm install
-  - $(npm bin)/webpack --config webpack.server.js
-  - $(npm bin)/webpack --config webpack.client.js
-  - cd ../../../
+  - rake dummy_apps
+  - rake examples
   - docker-compose up lint
 
 before_script:
@@ -40,7 +35,6 @@ before_script:
 
 script:
   - rake
-  - rake docker:lint
 
 notifications:
   slack:

data/Dockerfile_tests

@@ -3,7 +3,7 @@ FROM dylangrafmyre/docker-ci
 WORKDIR /app/
 
 COPY ["/lib/react_on_rails/version.rb", "/app/lib/react_on_rails/"]
-COPY ["Gemfile", "Gemfile.lock", "react_on_rails.gemspec", "/app/"]
+COPY ["Gemfile", "Gemfile.lock", "react_on_rails.gemspec", "rakelib/", "/app/"]
 COPY ["/spec/dummy/Gemfile", "/spec/dummy/Gemfile.lock", "/app/spec/dummy/"]
 RUN  bundle install --gemfile=spec/dummy/Gemfile
 

data/Gemfile

@@ -1,4 +1,70 @@
-source 'https://rubygems.org'
+source "https://rubygems.org"
 
-# Specify your gem's dependencies in react_on_rails.gemspec
+# Specify your gem"s dependencies in react_on_rails.gemspec
 gemspec
+
+# Bundle edge Rails instead: gem "rails", github: "rails/rails"
+gem "rails", "4.2.5"
+# Use sqlite3 as the database for Active Record
+gem "sqlite3"
+# Use SCSS for stylesheets
+gem "sass-rails", "~> 5.0"
+# Use Uglifier as compressor for JavaScript assets
+gem "uglifier", ">= 2.7.2"
+# Use CoffeeScript for .coffee assets and views
+gem "coffee-rails", "~> 4.1.0"
+# See https://github.com/rails/execjs#readme for more supported runtimes
+# gem "therubyracer", platforms: :ruby
+
+# Use jquery as the JavaScript library
+gem "jquery-rails"
+# Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks
+gem "turbolinks"
+# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
+gem "jbuilder", "~> 2.0"
+# bundle exec rake doc:rails generates the API under doc/api.
+gem "sdoc", "~> 0.4.0", group: :doc
+
+# Use ActiveModel has_secure_password
+# gem "bcrypt", "~> 3.1.7"
+
+# Use Unicorn as the app server
+# gem "unicorn"
+
+# Use Capistrano for deployment
+# gem "capistrano-rails", group: :development
+
+gem "therubyracer"
+
+group :development, :test do
+  # Call "byebug" anywhere in the code to stop execution and get a debugger console
+  gem "pry"
+  gem "pry-doc"
+  gem "pry-rails"
+  gem "pry-stack_explorer"
+  gem "pry-rescue"
+  gem "pry-byebug"
+  gem "awesome_print"
+  gem "rubocop", require: false
+  gem "ruby-lint", require: false
+  gem "scss_lint", require: false
+
+  # Access an IRB console on exception pages or by using <%= console %> in views
+  gem "web-console", "~> 2.0"
+
+  # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
+  gem "spring"
+end
+
+gem "bootstrap-sass"
+
+group :test do
+  gem "rspec-rails"
+  gem "coveralls", require: false
+  gem "capybara"
+  gem "capybara-screenshot"
+  gem "selenium-webdriver"
+  gem "chromedriver-helper"
+  gem "launchy"
+  gem "generator_spec"
+end

data/README.md

@@ -51,6 +51,7 @@ Please see [Getting Started](#getting-started) for how to set up your Rails proj
         + [Bootstrap via Rails Server](#bootstrap-via-rails-server)
         + [Bootstrap via Webpack HMR Dev Server](#bootstrap-via-webpack-hmr-dev-server)
         + [Keeping Custom Bootstrap Configurations Synced](#keeping-custom-bootstrap-configurations-synced)
+        + [Skip Bootstrap Integration](#skip-bootstrap-integration)
     - [Linters](#linters)
         + [JavaScript Linters](#javascript-linters)
         + [Ruby Linters](#ruby-linters)
@@ -75,7 +76,7 @@ Like the [react-rails](https://github.com/reactjs/react-rails) gem, React on Rai
     + *([Gem *Pull Request*](https://github.com/shakacode/react_on_rails/pull/68))*
     + *([Tutorial Pull Request](https://github.com/shakacode/react-webpack-rails-tutorial/pull/128))*
 
-See the [react-webpack-rails-tutorial](https://github.com/justin808/react-webpack-rails-tutorial/) for an example of a live implementation and code.
+See the [react-webpack-rails-tutorial](https://github.com/shakacode/react-webpack-rails-tutorial) for an example of a live implementation and code.
 
 ## Why Webpack?
 
@@ -84,7 +85,7 @@ Webpack is used for 2 purposes:
 1. Generate several JavaScript "bundles" for inclusion in `application.js`.
 2. Providing the Webpack Dev Server for quick prototyping of components without needing to refresh your browser to see updates.
 
-This usage of webpack fits neatly and simply into the existing Rails sprockets system and you can include React components on a Rails view with a simple helper. 
+This usage of webpack fits neatly and simply into the existing Rails sprockets system and you can include React components on a Rails view with a simple helper.
 
 Compare this to some alternative approaches for SPAs (Single Page Apps) that utilize Webpack and Rails. They will use a separate node server to distribute web pages, JavaScript assets, CSS, etc., and will still use Rails as an API server. A good example of this is our ShakaCode team member Alex's article [
 Universal React with Rails: Part I](https://medium.com/@alexfedoseev/isomorphic-react-with-rails-part-i-440754e82a59).
@@ -93,7 +94,7 @@ We're definitely not doing that. With react_on_rails, webpack is mainly generati
 
 ## Getting Started
 1. Add the following to your Gemfile and bundle install:
-  
+
   ```ruby
   gem "react_on_rails"
   ```
@@ -128,7 +129,7 @@ In most cases, you should use the `prerender: false` (default behavior) with the
 
 Now the server will interpret your JavaScript using [ExecJS](https://github.com/rails/execjs) and pass the resulting HTML to the client. We recommend using [therubyracer](https://github.com/cowboyd/therubyracer) as ExecJS's runtime. The generator will automatically add it to your Gemfile for you.
 
-Note that **server-rendering requires globally exposing your components by setting them to `global`, not `window`** (as is the case with client-rendering). If using the generator, you can pass the `--server-rendering` option to configure your application for server-side rendering. 
+Note that **server-rendering requires globally exposing your components by setting them to `global`, not `window`** (as is the case with client-rendering). If using the generator, you can pass the `--server-rendering` option to configure your application for server-side rendering.
 
 In the following screenshot you can see the 3 parts of react_on_rails rendering:
 
@@ -149,28 +150,28 @@ On Heroku deploys, the `lib/assets.rake` file takes care of running webpack duri
 Place your JavaScript code inside of the provided `client/app` folder. Use modules just as you would when using webpack alone. The difference here is that instead of mounting React components directly to an element using `React.render`, you **expose your components globally and then mount them with helpers inside of your Rails views**.
 
 + *Normal Mode (JavaScript is Rendered on client):*
-  
+
   If you are not server rendering, `clientGlobals.jsx` will have
- 
+
   ```javascript
   window.HelloWorldApp = HelloWorldApp;
   ```
 + *Server-Side Rendering:*
 
   If you are server rendering, `globals.jsx` will have:
-  
+
   ```javascript
   window.HelloWorldApp = HelloWorldAppClient;
   ```
-  
+
   `serverGlobals.jsx` will have:
-  
+
   ```javascript
   global.HelloWorldApp = HelloWorldAppServer;
   ```
-  
+
   In general, you want different initialization for your server rendered components.
-   
+
 ### Rails View Helpers In-Depth
 Once the bundled files have been generated in your `app/assets/javascripts/generated` folder and you have exposed your components globally, you will want to run your code in your Rails views using the included helper method.
 
@@ -213,6 +214,7 @@ Options:
   -j, [--skip-js-linters], [--no-skip-js-linters]      # Skip installing JavaScript linting files
   -L, [--ruby-linters], [--no-ruby-linters]            # Install ruby linting files, tasks, and configs
   -H, [--heroku-deployment], [--no-heroku-deployment]  # Install files necessary for deploying to Heroku
+  -b, [--skip-bootstrap], [--no-skip-bootstrap]        # Skip installing files for bootstrap support
 
 Runtime options:
   -f, [--force]                    # Overwrite files that already exist
@@ -224,7 +226,7 @@ Description:
     Create react on rails files for install generator.
 ```
 
-For a clear example of what each generator option will do, see our generator results repo: [Generator Results](https://github.com/shakacode/react_on_rails-generator-results-1-0-0/pulls). Each pull request shows a git "diff" that highlights the changes that the generator has made.
+For a clear example of what each generator option will do, see our generator results repo: [Generator Results](https://github.com/shakacode/react_on_rails-generator-results/pulls). Each pull request shows a git "diff" that highlights the changes that the generator has made.
 
 ### Understanding the Organization of the Generated Client Code
 The generated client code follows our organization scheme. Each unique set of functionality, is given its own folder inside of `client/app/bundles`. This encourages for modularity of DOMAINS.
@@ -238,7 +240,7 @@ Inside of the generated "HelloWorld" domain you will find the following folders:
 You may also notice the `app/lib` folder. This is for any code that is common between bundles and therefore needs to be shared (for example, middleware).
 
 ### Redux
-If you have used the `--redux` generator option, you will notice the familiar additional redux folders in addition to the aforementioned folders. The Hello World example has also been modified to use Redux. 
+If you have used the `--redux` generator option, you will notice the familiar additional redux folders in addition to the aforementioned folders. The Hello World example has also been modified to use Redux.
 
 Note the organizational paradigm of "bundles". These are like application domains and are used for grouping your code into webpack bundles, in case you decide to create different bundles for deployment. This is also useful for separating out logical parts of your application. The concept is that each bundle will have it's own Redux store. If you have code that you want to reuse across bundles, including components and reducers, place them under `/client/app/lib`.
 
@@ -263,6 +265,9 @@ When using the webpack dev server, which does not go through Rails, bootstrap is
 #### Keeping Custom Bootstrap Configurations Synced
 Because the webpack dev server and Rails each load Bootstrap via a different file (explained in the two sections immediately above), any changes to the way components are loaded in one file must also be made to the other file in order to keep styling consistent between the two. For example, if an import is excluded in `_bootstrap-custom.scss`, the same import should be excluded in `bootstrap-sass-config.js` so that styling in the Rails server and the webpack dev server will be the same.
 
+#### Skip Bootstrap Integration
+Bootstrap integration is enabled by default, but can be disabled by passing the `--skip-bootstrap` flag (alias `-b`). When you don't need Bootstrap in your existing project, just skip it as needed.
+
 ### Linters
 The React on Rails generator can add linters and their recommended accompanying configurations to your project. There are two classes of linters: ruby linters and JavaScript linters.
 
@@ -319,10 +324,11 @@ As you add more routes to your front-end application, you will need to make the
 + [Heroku Deployment](docs/additional_reading/heroku_deployment.md)
 + [Manual Installation](docs/additional_reading/manual_installation.md)
 + [Node Dependencies and NPM](docs/additional_reading/node_dependencies_and_npm.md)
-+ [Optional  Configuration](docs/additional_reading/optional_configuration.md)
++ [Optional Configuration](docs/additional_reading/optional_configuration.md)
 + [React Router](docs/additional_reading/react_router.md)
 + [Server Rendering Tips](docs/additional_reading/server_rendering_tips.md)
 + [Tips](docs/additional_reading/tips.md)
++ [Webpack Configuration](docs/additional_reading/webpack.md)
 
 ## Contributing
 Bug reports and pull requests are welcome. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to our version of the [Contributor Covenant](contributor-covenant.org) code of conduct (see [CODE OF CONDUCT](docs/code_of_conduct.md)).
@@ -347,7 +353,7 @@ And based on the work of the [react-rails gem](https://github.com/reactjs/react-
 
 ## About [ShakaCode](http://www.shakacode.com/)
 
-Visit [our forums!](http://forum.shakacode.com). We've got a [category dedicated to react_on_rails](http://forum.shakacode.com/c/rails/reactonrails). 
+Visit [our forums!](http://forum.shakacode.com). We've got a [category dedicated to react_on_rails](http://forum.shakacode.com/c/rails/reactonrails).
 
 If you're looking for consulting on a project using React and Rails, email us ([contact@shakacode.com](mailto: contact@shakacode.com))! You can also join our slack room for some free advice.
 

data/Rakefile

@@ -1,111 +1,5 @@
-require "fileutils"
-require "coveralls/rake/task"
-
-namespace :run_rspec do
-  desc "Run RSpec for top level only"
-  task :gem do
-    sh %( COVERAGE=true rspec spec/react_on_rails )
-  end
-
-  desc "Run RSpec for spec/dummy only"
-  task :dummy do
-    # TEST_ENV_NUMBER is used to make SimpleCov.command_name unique in order to
-    # prevent a name collision
-    sh %( cd spec/dummy && DRIVER=selenium_firefox COVERAGE=true TEST_ENV_COMMAND_NAME="dummy-tests" rspec )
-  end
-
-  desc "Run RSpec for spec/dummy only"
-  task :dummy_react_013 do
-    # TEST_ENV_NUMBER is used to make SimpleCov.command_name unique in order to
-    # prevent a name collision
-    sh %( cd spec/dummy-react-013 &&
-          DRIVER=selenium_firefox COVERAGE=true TEST_ENV_COMMAND_NAME="dummy-react-013-tests" rspec )
-  end
-
-  desc "Run RSpec on spec/empty_spec in order to have SimpleCov generate a coverage report from cache"
-  task :empty do
-    sh %( COVERAGE=true rspec spec/empty_spec.rb )
-  end
-
-  Coveralls::RakeTask.new
-
-  task run_rspec: [:gem, :dummy, :dummy_react_013, :empty, "coveralls:push"] do
-    puts "Completed all RSpec tests"
-  end
-end
-desc "Runs all tests. Run `rake -D run_rspec` to see all available test options"
-task run_rspec: ["run_rspec:run_rspec"]
-
-task default: ["run_rspec", "docker:lint"]
-
-namespace :lint do
-  desc "Run Rubocop as shell"
-  task :rubocop do
-    sh "rubocop ."
-  end
-
-  desc "Run ruby-lint as shell"
-  task :ruby do
-    sh "ruby-lint app spec lib"
-  end
-
-  desc "Run scss-lint as shell"
-  task :scss do
-    sh "scss-lint spec/dummy/app/assets/stylesheets/"
-  end
-
-  desc "Run eslint as shell"
-  task :eslint do
-    sh "eslint . --ext .jsx and .js"
-  end
-
-  desc "Run jscs from shell"
-  task :jscs do
-    sh "jscs -e -v ."
-  end
-
-  desc "Run all eslint, jscs, rubocop linters. Skip ruby-lint and scss"
-  task lint: [:eslint, :jscs, :rubocop] do
-    puts "Completed all linting"
-  end
-end
-
-desc "Runs all linters. Run `rake -D lint` to see all available lint options"
-task lint: ["lint:lint"]
-
-namespace :docker do
-  desc "Run Rubocop linter from docker"
-  task :rubocop do
-    sh "docker-compose run lint rake lint:rubocop"
-  end
-
-  desc "Run ruby-lint linter from docker"
-  task :ruby do
-    sh "docker-compose run lint rake lint:ruby"
-  end
-
-  desc "Run scss-lint linter from docker"
-  task :scss do
-    sh "docker-compose run lint rake lint:scss"
-  end
-
-  desc "Run eslint linter from docker"
-  task :eslint do
-    sh "docker-compose run lint rake lint:eslint"
-  end
-
-  desc "Run jscs linter from docker"
-  task :jscs do
-    sh "docker-compose run lint rake lint:jscs"
-  end
-  desc "Run all linting from docker"
-  task :lint do
-    sh "docker-compose run lint rake lint"
-  end
-end
-
-desc "Runs all linters from docker. Run `rake -D docker` to see all available lint options"
-task docker: ["docker:lint"]
+# Rake will automatically load any *.rake files inside of the "rakelib" folder
+# See rakelib/
 
 desc "Run all tests and linting"
-task ci: %w(run_rspec lint)
+task default: ["run_rspec", "docker:lint"]

data/app/assets/javascripts/react_on_rails.js

@@ -200,6 +200,11 @@
 
   function provideClientReact() {
     if (typeof ReactDOM === 'undefined') {
+      if (React.version >= '0.14') {
+        console.warn('WARNING: ReactDOM is not configured in webpack.server.rails.config.js file as an entry.\n' +
+                     'See: https://github.com/shakacode/react_on_rails/blob/master/docs/webpack.md for more detailed hints.');
+      }
+
       return React;
     }
 
@@ -208,6 +213,11 @@
 
   function provideServerReact() {
     if (typeof ReactDOMServer === 'undefined') {
+      if (React.version >= '0.14') {
+        console.warn('WARNING: `react-dom/server` is not configured in webpack.server.rails.config.js file as an entry.\n' +
+                     'See: https://github.com/shakacode/react_on_rails/blob/master/docs/webpack.md for more detailed hints.');
+      }
+
       return React;
     }
 

data/docker-compose.yml

@@ -1,9 +1,3 @@
-ci:
-  build: .
-  dockerfile: Dockerfile_ci
-  working_dir: /app/
-  volumes:
-    - '.:/app/'
 lint:
   image: dylangrafmyre/docker-lint
   working_dir: /app/

data/docs/additional_reading/webpack.md

@@ -0,0 +1,46 @@
+# Entry Points and Globally Exposing Objects
+
+You should ensure you configure the entry points correctly for webpack.
+
+## When using React 0.14 and greater
+
+You need both include `react-dom/server` and `react` as values for `entry`, like this:
+
+```
+  entry: {
+
+    // See use of 'vendor' in the CommonsChunkPlugin inclusion below.
+    vendor: [
+      'babel-core/polyfill',
+      'jquery',
+      'jquery-ujs',
+      'react',
+      'react-dom',
+    ],
+```
+
+and you need to expose them:
+
+```
+      // React is necessary for the client rendering:
+      {test: require.resolve('react'), loader: 'expose?React'},
+      {test: require.resolve('react-dom'), loader: 'expose?ReactDOM'},
+      {test: require.resolve('jquery'), loader: 'expose?jQuery'},
+      {test: require.resolve('jquery'), loader: 'expose?$'},
+```
+
+`webpack.server.config.js` is similar, but substitute:
+
+```
+ entry: ['./yourCode', 'react-dom/server', 'react'],
+```
+
+and use this line rather than `{test: require.resolve('react-dom'), loader: 'expose?ReactDOM'},`:
+
+```
+   {test: require.resolve('react-dom/server'), loader: 'expose?ReactDOMServer'},
+```
+
+## When you use React 0.13
+
+You don't need to put in react-dom.