Skip to content

Commit

Permalink
Merge remote-tracking branch 'upstream/master' into patch-1
Browse files Browse the repository at this point in the history
  • Loading branch information
modosc committed Apr 4, 2016
2 parents 7e78ae4 + da9d525 commit 284f0d2
Show file tree
Hide file tree
Showing 24 changed files with 324 additions and 5,223 deletions.
2 changes: 1 addition & 1 deletion .rubocop.yml
Expand Up @@ -57,7 +57,7 @@ Metrics/PerceivedComplexity:
Max: 10

Metrics/ClassLength:
Max: 114
Max: 140

Metrics/ParameterLists:
Max: 5
Expand Down
2 changes: 1 addition & 1 deletion .travis.yml
Expand Up @@ -22,7 +22,7 @@ before_install:
- sudo apt-get install -y xvfb

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 5.5.0
- 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 5.10.0
- npm install -g npm
- npm install -g poltergeist
- gem install bundler
Expand Down
28 changes: 22 additions & 6 deletions CHANGELOG.md
Expand Up @@ -4,7 +4,22 @@ All notable changes to this project will be documented in this file. Items under
Contributors: please follow the recommendations outlined at [keepachangelog.com](http://keepachangelog.com/). Please use the existing headings and styling as a guide, and add a link for the version diff at the bottom of the file. Also, please update the `Unreleased` link to compare to the latest release version.
## [Unreleased]

## [5.0.0] - 2016-03-27
## [5.1.0] - 2016-04-03
##### Added
All 5.1.0 changes can be found in [#362](https://github.com/shakacode/react_on_rails/pull/362) by [justin808](https://github.com/justin808).
- Generator enhancements
- Generator adds line to spec/rails_helper.rb so that running specs will ensure assets are compiled.
- Other small changes to the generator including adding necessary npm scripts to allow React on Rails to build assets.
- Npm modules updated for generator.
- Added babel-runtime in to the client/package.json created.
- Server rendering
- Added more diagnostics for server rendering.
- Calls to setTimeout and setInterval are not logged for server rendering unless env TRACE_REACT_ON_RAILS is set to YES.
- Updated all project npm dependencies to latest.
- Update to node 5.10.0 for CI.
- Added babel-runtime as a peer dependency for the npm module.

## [5.0.0] - 2016-04-01

##### Added
- Added `railsContext`, an object which gets passed always as the second parameter to both react component and redux store generator functions, both for server and client rendering. This provides data like the current locale, the pathname, etc. The data values are customizable by a new configuration called `rendering_extension` where you can create a module with a method called `rendering_extension`. This allows you to add additional values to the Rails Context. Implement one static method called `custom_context(view_context)` and return a Hash. See [#345](https://github.com/shakacode/react_on_rails/pull/345) by [justin808](https://github.com/justin808)
Expand All @@ -13,7 +28,7 @@ Contributors: please follow the recommendations outlined at [keepachangelog.com]
- Previously, you could pass arbitrary additional html attributes to react_component. Now, you need to pass them in as a named parameter `html_options` to react_component.

##### Breaking Changes
- You must provide named attributes, including `props` for view helper `react_compnent`.
- You must provide named attributes, including `props` for view helper `react_compnent`. See [this commit]](https://github.com/shakacode/react-webpack-rails-tutorial/commit/a97fa90042cbe27be7fd7fa70b5622bfcf9c3673) for an example migration used for [www.reactrails.com](http://www.reactrails.com).

## [4.0.3] - 2016-03-17

Expand Down Expand Up @@ -96,20 +111,20 @@ Contributors: please follow the recommendations outlined at [keepachangelog.com]
- Support for Turbolinks 5! [#270](https://github.com/shakacode/react_on_rails/pull/270).
- Added better error messages for `ReactOnRails.register()`. [#273](https://github.com/shakacode/react_on_rails/pull/273).

##### Breaking Change
##### Breaking Change
- Calls to `react_component` should use a named argument of props. For example, change this:
```ruby
<%= react_component("ReduxSharedStoreApp", {}, prerender: false, trace: true) %>
```
to
```ruby
<%= react_component("ReduxSharedStoreApp", props: {}, prerender: false, trace: true) %>
```
You'll get a deprecation message to change this.
- Renamed `ReactOnRails.configure_rspec_to_compile_assets` to `ReactOnRails::TestHelper.configure_rspec_to_compile_assets`. The code has also been optimized to check for whether or not the compiled webpack bundles are up to date or not and will not run if not necessary. If you are using non-standard directories for your generated webpack assets (`app/assets/javascripts/generated` and `app/assets/stylesheets/generated`) or have additional directories you wish the helper to check, you need to update your ReactOnRails configuration accordingly. See [documentation](https://github.com/shakacode/react_on_rails/blob/master/docs/additional-reading/rspec_configuration.md) for how to do this. [#253](https://github.com/shakacode/react_on_rails/pull/253).
- You have to call `ReactOnRails.register` to register react components. This was deprecated in v2. [#273](https://github.com/shakacode/react_on_rails/pull/273).

##### Migration Steps v2 to v3
- [spec/dummy/spec/rails_helper.rb](https://github.com/shakacode/react_on_rails/blob/master/spec%2Fdummy%2Fspec%2Frails_helper.rb#L36..38) for an example. Add this line to your `rails_helper.rb`:
```ruby
Expand Down Expand Up @@ -247,7 +262,8 @@ Best done with Object destructing:

##### Fixed
- Fix several generator related issues.
[Unreleased]: https://github.com/shakacode/react_on_rails/compare/5.0.0...master
[Unreleased]: https://github.com/shakacode/react_on_rails/compare/5.1.0...master
[5.1.0]: https://github.com/shakacode/react_on_rails/compare/5.0.0...5.1.0
[5.0.0]: https://github.com/shakacode/react_on_rails/compare/4.0.3...5.0.0
[4.0.3]: https://github.com/shakacode/react_on_rails/compare/4.0.2...4.0.3
[4.0.2]: https://github.com/shakacode/react_on_rails/compare/4.0.1...4.0.2
Expand Down
14 changes: 14 additions & 0 deletions KUDOS.md
@@ -0,0 +1,14 @@
This is a sibling file to [PROJECTS.md](./PROJECTS.md).

I'm looking for quotes on why you like using React on Rails. You might mention any benefits you particularly like and if you've migrated from react-rails. Just click to edit and github will automatically open up a PR. Thanks to everybody that contributes!

> Gone are the days of using bower or rails gems to manage front end dependencies! React on Rails provides webpack integration to give us a modern build process, es6 syntax and the entire npm ecosystem of libraries to use, along with view helpers to make React integration with Rails feel better than a cool summer breeze. - [@kalamyty](https://twitter.com/kalamyty)
### Compared to Browserify
See comments [here](https://lorefnon.me/2015/11/15/a-minimal-setup-for-using-es6-modules-in-rails.html)

![2016-03-23_16-24-51](https://cloud.githubusercontent.com/assets/1118459/14006786/ebf8cac2-f114-11e5-80f9-4a6d437dd071.png)

https://twitter.com/ollieglass/status/713372606804729856

![2016-03-25_07-40-01](https://cloud.githubusercontent.com/assets/1118459/14053652/d05480f0-f276-11e5-9d9a-62d1146cd82d.png)
1 change: 1 addition & 0 deletions PROJECTS.md
Expand Up @@ -8,6 +8,7 @@
* **Friends and Guests**, the signature product of [ShakaCode](http://www.shakacode.com), which is a "Social Network Connecting Hosts and Guests". *Coming soon!*
* **[Madrone Analytics](http://madroneco.com/)**: The original client of [ShakaCode](http://www.shakacode.com) that led to the development of React on Rails, as described in [Fast Rich Client Rails Development With Webpack and the ES6 Transpiler](http://www.railsonmaui.com/blog/2014/10/03/integrating-webpack-and-the-es6-transpiler-into-an-existing-rails-project/).
* **[Pivotal Tracker](http://www.pivotaltracker.com/)**: The first (and most-loved) agile project management tool built on Rails. React on Rails has greatly simplified integration and workflow for our React components in Rails!
* **[Confident Financial Solutions](https://www.mycfsapp.com/)**: Auto Repair Financing to help people get back on the road and back to life.

--------

Expand Down
27 changes: 13 additions & 14 deletions README.md
@@ -1,10 +1,9 @@
[![Build Status](https://travis-ci.org/shakacode/react_on_rails.svg?branch=master)](https://travis-ci.org/shakacode/react_on_rails) [![Dependency Status](https://gemnasium.com/shakacode/react_on_rails.svg)](https://gemnasium.com/shakacode/react_on_rails) [![Gem Version](https://badge.fury.io/rb/react_on_rails.svg)](https://badge.fury.io/rb/react_on_rails) [![npm version](https://badge.fury.io/js/react-on-rails.svg)](https://badge.fury.io/js/react-on-rails) [![Code Climate](https://codeclimate.com/github/shakacode/react_on_rails/badges/gpa.svg)](https://codeclimate.com/github/shakacode/react_on_rails) [![Coverage Status](https://coveralls.io/repos/shakacode/react_on_rails/badge.svg?branch=master&service=github)](https://coveralls.io/github/shakacode/react_on_rails?branch=master)

# NEWS
* 5.0.0.rc.1 has shipped! Please let me know if you're tried it and if you like the changes. Please see the [CHANGELOG.md](./CHANGELOG.md) for details on the breaking changes.
* 5.1.0 has shipped!Please see the [CHANGELOG.md](./CHANGELOG.md) for details on the latest release and any breaking changes.
* [New slides on React on Rails](http://www.slideshare.net/justingordon/react-on-rails-v4032).
* Always see the [CHANGELOG.md](./CHANGELOG.md) for the latest project changes.
* 2016-02-28: We added a [Projects page](PROJECTS.md). Please edit the page your project or [email us](mailto:contact@shakacode.com) and we'll add you. We also love stars as it helps us attract new users and contributors.
* 2016-02-28: We added a [Projects page](./PROJECTS.md) and a [Kudos page](./KUDOS.md). Please edit the page your project or [email us](mailto:contact@shakacode.com) and we'll add you. We also love stars as it helps us attract new users and contributors.
* *See [NEWS.md](NEWS.md) for the full news history.*

# NOTES
Expand All @@ -22,7 +21,7 @@ Be sure to see:
* [React on Rails, Slides](http://www.slideshare.net/justingordon/react-on-rails-v4032)
* [The React on Rails Doctrine](https://medium.com/@railsonmaui/the-react-on-rails-doctrine-3c59a778c724)
* [React Webpack Rails Tutorial Code](https://github.com/shakacode/react-webpack-rails-tutorial) along with the live example at [www.reactrails.com](http://www.reactrails.com).
* [Projects](PROJECTS.md) using React on Rails. Please submit yours!
* [Projects](PROJECTS.md) using and [KUDOS](./KUDOS.md) for React on Rails. Please submit yours!
* On Twitter, follow [@railsonmaui](https://twitter.com/railsonmaui) and [@shakacode](https://twitter.com/shakacode) for updates on releases.

## Including your React Component in your Rails Views
Expand Down Expand Up @@ -67,7 +66,7 @@ Please see [Getting Started](#getting-started) for how to set up your Rails proj
+ [Why Webpack?](#why-webpack)
+ [Getting Started](#getting-started)
- [Installation Summary](#installation-summary)
- [Initializer Configuration: config/initializers/react_on_rails.rb](#initializer-configuration)
- [Initializer Configuration: config/initializers/react_on_rails.rb](#initializer-configuration)
+ [How it Works](#how-it-works)
- [Client-Side Rendering vs. Server-Side Rendering](#client-side-rendering-vs-server-side-rendering)
- [Building the Bundles](#building-the-bundles)
Expand Down Expand Up @@ -130,7 +129,7 @@ We're definitely not doing that. With react_on_rails, webpack is mainly generati
1. Add the following to your Gemfile and bundle install:
```ruby
gem "react_on_rails", "~> 4"
gem "react_on_rails", "~> 5"
```
2. See help for the generator:
Expand Down Expand Up @@ -261,7 +260,7 @@ Set the config value for the `rendering_extension`:
config.rendering_extension = RenderingExtension
```

Implement it like this above in the same file. Create a class method on the module called `custom_context` that takes the `view_context` for a param.
Implement it like this above in the same file. Create a class method on the module called `custom_context` that takes the `view_context` for a param.

See [spec/dummy/config/initializers/react_on_rails.rb](spec/dummy/config/initializers/react_on_rails.rb) for a detailed example.

Expand Down Expand Up @@ -387,11 +386,11 @@ The best source of docs is the main [ReactOnRails.js](node_package/src/ReactOnRa
registerStore(stores)

/**
* Allows retrieval of the store by name. This store will be hydrated by any Rails form props.
* Allows retrieval of the store by name. This store will be hydrated by any Rails form props.
* Pass optional param throwIfMissing = false if you want to use this call to get back null if the
* store with name is not registered.
* @param name
* @param throwIfMissing Defaults to true. Set to false to have this call return undefined if
* @param throwIfMissing Defaults to true. Set to false to have this call return undefined if
* there is no store with the given name.
* @returns Redux Store, possibly hydrated
*/
Expand Down Expand Up @@ -428,7 +427,7 @@ static vs. hot is picked based on whether `ENV["REACT_ON_RAILS_ENV"] == "HOT"`
hot: 'application_non_webpack',
'data-turbolinks-track' => true) %>
```

See application.html.erb for usage example and [application.html.erb](https://github.com/shakacode/react-webpack-rails-tutorial/blob/master/app%2Fviews%2Flayouts%2Fapplication.html.erb)

**env_javascript_include_tag(args = {})**
Expand Down Expand Up @@ -564,7 +563,7 @@ You will need to make a function that can create the store you will be using for

```
function appStore(props, railsContext) {
// Create a hydrated redux store, using props and the railsContext (object with
// Create a hydrated redux store, using props and the railsContext (object with
// Rails contextual information).
return myAppStore;
}
Expand Down Expand Up @@ -613,9 +612,9 @@ Components are created as [stateless function(al) components](https://facebook.g

## React Router
[React Router](https://github.com/reactjs/react-router) is supported, including server side rendering! See:

1. [React on Rails docs for react-router](docs/additional-reading/react-router.md)
1. Examples in [spec/dummy/app/views/react_router](spec/dummy/app/views/react_router) and follow to the JavaScript code in the [spec/dummy/client/app/startup/ServerRouterApp.jsx](spec/dummy/client/app/startup/ServerRouterApp.jsx).
1. Examples in [spec/dummy/app/views/react_router](spec/dummy/app/views/react_router) and follow to the JavaScript code in the [spec/dummy/client/app/startup/ServerRouterApp.jsx](spec/dummy/client/app/startup/ServerRouterApp.jsx).

## Developing with the Webpack Dev Server
One of the benefits of using webpack is access to [webpack's dev server](https://webpack.github.io/docs/webpack-dev-server.html) and its [hot module replacement](https://webpack.github.io/docs/hot-module-replacement-with-webpack.html) functionality.
Expand Down Expand Up @@ -653,7 +652,7 @@ Note: If you have components from react-rails you want to use, then you will nee
## Additional Reading
+ [React on Rails, Slides](http://www.slideshare.net/justingordon/react-on-rails-v4032)
+ [The React on Rails Doctrine](https://medium.com/@railsonmaui/the-react-on-rails-doctrine-3c59a778c724)
+ [Installation Overview](docs/additional-reading/installation-overview.md)
+ [Installation Overview](docs/additional-reading/installation-overview.md)
+ [Babel](docs/additional-reading/babel.md)
+ [Heroku Deployment](docs/additional-reading/heroku-deployment.md)
+ [Manual Installation](docs/additional-reading/manual-installation.md)
Expand Down
40 changes: 39 additions & 1 deletion docs/additional-reading/server-rendering-tips.md
@@ -1,5 +1,6 @@
# Server Rendering Tips

## General Tips
- Your code can't reference `document`. Server side JS execution does not have access to `document`, so jQuery and some
other libs won't work in this environment. You can debug this by putting in `console.log`
statements in your code.
Expand All @@ -8,4 +9,41 @@
do this is to use a generator function.
- If you're serious about server rendering, it's worth the effort to have different entry points for client and server rendering. It's worth the extra complexity.

The point is that you have separate files for top level client or server side, and you pass some extra option indicating that rendering is happening server sie.
The point is that you have separate files for top level client or server side, and you pass some extra option indicating that rendering is happening server side.

## Troubleshooting Server Rendering

1. First be sure your code works with server rendering disabled (`prerender: false`)
2. `export TRACE_REACT_ON_RAILS=YES` Turn this on to get both the invocation code for you component, as well as the whole file used to setup the JavaScript context.

## setTimeout and setInterval

These methods are polyfilled for server rendering to be no-ops. We don't log calls to these by default as some libraries, namely babel-polyfill, will call setTimout. If you wish to log calls to setTimeout and setInterval, set the ENV value: `export TRACE_REACT_ON_RAILS=YES`.

Here's an example of this which shows the line numbers that end up calling setTimeout:
```
➜ ~/shakacode/react_on_rails/gen-examples/examples/basic-server-rendering (add-rails-helper-to-generator u=) ✗ export TRACE_REACT_ON_RAILS=YES
➜ ~/shakacode/react_on_rails/gen-examples/examples/basic-server-rendering (add-rails-helper-to-generator u=) ✗ rspec
Hello World
Building Webpack client-rendering assets...
Completed building Webpack client-rendering assets.
ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ
react_renderer.rb: 92
wrote file tmp/server-generated.js
ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ
ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ
react_renderer.rb: 92
wrote file tmp/base_js_code.js
ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ
[SERVER] setTimeout is not defined for execJS. See https://github.com/sstephenson/execjs#faq. Note babel-polyfill will call this.
[SERVER] at setTimeout (<eval>:31:17)
at defer (<eval>:4422:8)
at setImmediate (<eval>:4387:6)
at notify (<eval>:4481:16)
at module.exports (<eval>:4490:6)
at notify (<eval>:4081:4)
at Promise.$resolve (<eval>:4189:8)
at <eval>:793:18
at Function.resolve (<eval>:4265:6)
the hello world example works
```

0 comments on commit 284f0d2

Please sign in to comment.