react_on_rails 4.0.3 → 5.0.0.rc.1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/CHANGELOG.md +25 -7
- data/NEWS.md +1 -1
- data/README.md +186 -78
- data/app/helpers/react_on_rails_helper.rb +99 -74
- data/docs/{additional_reading → additional-reading}/babel.md +0 -0
- data/docs/{additional_reading/heroku_deployment.md → additional-reading/heroku-deployment.md} +0 -0
- data/docs/additional-reading/hot-reloading-rails-development.md +111 -0
- data/docs/additional-reading/installation-overview.md +32 -0
- data/docs/{additional_reading/node_dependencies_and_npm.md → additional-reading/node-dependencies-and-npm.md} +0 -0
- data/docs/{additional_reading → additional-reading}/rails_view_rendering_from_inline_javascript.md +0 -0
- data/docs/{additional_reading → additional-reading}/react-and-redux.md +0 -0
- data/docs/{additional_reading/react_router.md → additional-reading/react-router.md} +5 -3
- data/docs/{recommended-project-structure.md → additional-reading/recommended-project-structure.md} +22 -0
- data/docs/{additional_reading/rspec_configuration.md → additional-reading/rspec-configuration.md} +0 -0
- data/docs/{additional_reading/server_rendering_tips.md → additional-reading/server-rendering-tips.md} +0 -0
- data/docs/{additional_reading → additional-reading}/tips.md +0 -0
- data/docs/{additional_reading → additional-reading}/turbolinks.md +0 -0
- data/docs/{additional_reading → additional-reading}/updating-dependencies.md +0 -0
- data/docs/{additional_reading → additional-reading}/webpack.md +0 -0
- data/docs/{contributing.md → contributor-info/contributing.md} +0 -0
- data/docs/{generator_testing.md → contributor-info/generator-testing.md} +0 -0
- data/docs/{releasing.md → contributor-info/releasing.md} +0 -0
- data/docs/{code_of_conduct.md → misc/code_of_conduct.md} +0 -0
- data/docs/{doctrine.md → misc/doctrine.md} +1 -1
- data/docs/{rails3.md → misc/rails3.md} +0 -0
- data/docs/{tutorial-v2.md → tutorial.md} +4 -4
- data/lib/react_on_rails/configuration.rb +6 -3
- data/lib/react_on_rails/test_helper/ensure_assets_compiled.rb +1 -1
- data/lib/react_on_rails/test_helper.rb +1 -1
- data/lib/react_on_rails/version.rb +1 -1
- data/package.json +1 -1
- metadata +26 -27
- data/docs/additional_reading/hot-reloading-rails-development.md +0 -32
- data/docs/additional_reading/manual_installation.md +0 -117
- data/docs/additional_reading/optional_configuration.md +0 -33
data/package.json
CHANGED
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: react_on_rails
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version:
|
4
|
+
version: 5.0.0.rc.1
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Justin Gordon
|
8
8
|
autorequire:
|
9
9
|
bindir: exe
|
10
10
|
cert_chain: []
|
11
|
-
date: 2016-03-
|
11
|
+
date: 2016-03-28 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: connection_pool
|
@@ -318,31 +318,30 @@ files:
|
|
318
318
|
- app/helpers/react_on_rails_helper.rb
|
319
319
|
- docker-compose.yml
|
320
320
|
- docs/LICENSE
|
321
|
-
- docs/
|
322
|
-
- docs/
|
323
|
-
- docs/
|
324
|
-
- docs/
|
325
|
-
- docs/
|
326
|
-
- docs/
|
327
|
-
- docs/
|
328
|
-
- docs/
|
329
|
-
- docs/
|
330
|
-
- docs/
|
331
|
-
- docs/
|
332
|
-
- docs/
|
333
|
-
- docs/
|
334
|
-
- docs/
|
335
|
-
- docs/
|
336
|
-
- docs/code_of_conduct.md
|
321
|
+
- docs/additional-reading/babel.md
|
322
|
+
- docs/additional-reading/heroku-deployment.md
|
323
|
+
- docs/additional-reading/hot-reloading-rails-development.md
|
324
|
+
- docs/additional-reading/installation-overview.md
|
325
|
+
- docs/additional-reading/node-dependencies-and-npm.md
|
326
|
+
- docs/additional-reading/rails_view_rendering_from_inline_javascript.md
|
327
|
+
- docs/additional-reading/react-and-redux.md
|
328
|
+
- docs/additional-reading/react-router.md
|
329
|
+
- docs/additional-reading/recommended-project-structure.md
|
330
|
+
- docs/additional-reading/rspec-configuration.md
|
331
|
+
- docs/additional-reading/server-rendering-tips.md
|
332
|
+
- docs/additional-reading/tips.md
|
333
|
+
- docs/additional-reading/turbolinks.md
|
334
|
+
- docs/additional-reading/updating-dependencies.md
|
335
|
+
- docs/additional-reading/webpack.md
|
337
336
|
- docs/coding-style/linters.md
|
338
337
|
- docs/coding-style/style.md
|
339
|
-
- docs/contributing.md
|
340
|
-
- docs/
|
341
|
-
- docs/
|
342
|
-
- docs/
|
343
|
-
- docs/
|
344
|
-
- docs/
|
345
|
-
- docs/tutorial
|
338
|
+
- docs/contributor-info/contributing.md
|
339
|
+
- docs/contributor-info/generator-testing.md
|
340
|
+
- docs/contributor-info/releasing.md
|
341
|
+
- docs/misc/code_of_conduct.md
|
342
|
+
- docs/misc/doctrine.md
|
343
|
+
- docs/misc/rails3.md
|
344
|
+
- docs/tutorial.md
|
346
345
|
- lib/generators/USAGE
|
347
346
|
- lib/generators/react_on_rails/base_generator.rb
|
348
347
|
- lib/generators/react_on_rails/bootstrap_generator.rb
|
@@ -457,9 +456,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
|
|
457
456
|
version: '0'
|
458
457
|
required_rubygems_version: !ruby/object:Gem::Requirement
|
459
458
|
requirements:
|
460
|
-
- - "
|
459
|
+
- - ">"
|
461
460
|
- !ruby/object:Gem::Version
|
462
|
-
version:
|
461
|
+
version: 1.3.1
|
463
462
|
requirements: []
|
464
463
|
rubyforge_project:
|
465
464
|
rubygems_version: 2.6.1
|
@@ -1,32 +0,0 @@
|
|
1
|
-
# Hot Reloading of Assets For Rails Development
|
2
|
-
|
3
|
-
This document outlines the steps to setup your React On Rails Environment so that you can experience the pleasure of hot reloading of JavaScript and Sass during your Rails development work. There are 2 examples of this setup:
|
4
|
-
1. [spec/dummy](../spec/dummy): Simpler setup used for integration testing this gem.
|
5
|
-
1. [shakacode/react-webpack-rails-tutorial](https://github.com/shakacode/react-webpack-rails-tutorial/). Full featured setup using Twitter bootstrap.
|
6
|
-
|
7
|
-
## High Level Strategy
|
8
|
-
|
9
|
-
We'll use a Webpack Dev server on port 3500 to provide the assets to Rails, rather than the asset pipeline, and only during development mode. This is configured via the `Procfile.hot`.
|
10
|
-
|
11
|
-
`Procfile.static` provides an alternative that uses "static" assets, similar to a production deployment.
|
12
|
-
|
13
|
-
The secret sauce is in the [app/views/layouts/application.html.erb](spec/dummy/app/views/layouts/application.html.erb) where it uses view helpes to configure the correct assets to load, being either the "hot" assets or the "static" assets.
|
14
|
-
|
15
|
-
## Places to Configure (Files to Examine)
|
16
|
-
|
17
|
-
1. See the Webpack config files. Note, these examples are now setup for using [CSS Modules](https://github.com/css-modules/css-modules).
|
18
|
-
1. [client/webpack.client.base.config.js](spec/dummy/client/webpack.client.base.config.js): Common configuration for hot or static assets.
|
19
|
-
1. [client/webpack.client.hot.config.js](spec/dummy/client/webpack.client.hot.config.js): Setup for hot loading, using react-transform-hmr.
|
20
|
-
1. [client/webpack.client.static.config.js](spec/dummy/client/webpack.client.static.config.js): Setup for static loading, as is done in a production deployment.
|
21
|
-
1. [app/views/layouts/application.html.erb](spec/dummy/app/views/layouts/application.html.erb): Uses the view helpers `env_stylesheet_link_tag` and `env_javascript_include_tag` which will either do the hot reloading or the static loading.
|
22
|
-
1. See the Procfiles: [Procfile.hot](spec/dummy/Procfile.hot) and [Procfile.static](spec/dummy/Procfile.static). These:
|
23
|
-
1. Start the webpack processes, depending on the mode or HOT or not.
|
24
|
-
2. Start the rails server, setting an ENV value of REACT_ON_RAILS_ENV to HOT if we're hot loading or else setting this to blank.
|
25
|
-
1. Configure the file Rails asset pipeline files:
|
26
|
-
1. [app/assets/javascripts/application_static.js.erb](spec/dummy/app/assets/javascripts/application_static.js.erb): We have to only specify the `vendor-bundle` and `app-bundle` if we're not HOT loading, as Sprockets will throw an error if that is the case. Note the use of `require_asset`.
|
27
|
-
1. [app/assets/stylesheets/application_static.js.erb](spec/dummy/app/assets/stylesheets/application_static.scss.erb): We have to only specify the `vendor-bundle` and `app-bundle` if we're not HOT loading, as Sprockets will throw an error if that is the case. Note the conditional around the @import.
|
28
|
-
1. Be sure your [config/initializers/assets.rb](spec/dummy/config/initializers/assets.rb) is configured to include the webpack generated files.
|
29
|
-
1. Copy the [client/server-rails-hot.js](spec/dummy/client/server-rails-hot.js) to the [client](client) directory.
|
30
|
-
1. Copy the scripts in the top level and client level `package.json` files:
|
31
|
-
1. Top Level: [package.json](spec/dummy/package.json)
|
32
|
-
1. Client Level: [package.json](spec/dummy/client/package.json)
|
@@ -1,117 +0,0 @@
|
|
1
|
-
# TODO FIX THIS FILE AFTER this is updated: https://github.com/shakacode/react-webpack-rails-tutorial
|
2
|
-
|
3
|
-
# Manual Installation
|
4
|
-
Follow these steps if you choose to forgo the generator:
|
5
|
-
|
6
|
-
1. Globally expose React in your webpack config like [this](https://github.com/shakacode/react-webpack-rails-tutorial/blob/537c985dc82faee333d80509343ca32a3965f9dd/client/webpack.client.base.config.js#L31):
|
7
|
-
|
8
|
-
```javascript
|
9
|
-
module: {
|
10
|
-
loaders: [
|
11
|
-
// React is necessary for the client rendering:
|
12
|
-
{ test: require.resolve('react'), loader: 'expose?React' },
|
13
|
-
|
14
|
-
// For React 0.14
|
15
|
-
{ test: require.resolve('react-dom'), loader: 'expose?ReactDOM' }, // not in the server one
|
16
|
-
```
|
17
|
-
|
18
|
-
|
19
|
-
3. Expose your client globals like [this](https://github.com/shakacode/react-webpack-rails-tutorial/blob/537c985dc82faee333d80509343ca32a3965f9dd/client/app/startup/clientRegistration.jsx#L3):
|
20
|
-
|
21
|
-
```javascript
|
22
|
-
import App from './ClientApp';
|
23
|
-
import ReactOnRails from 'react-on-rails';
|
24
|
-
ReactOnRails.register({ App });
|
25
|
-
```
|
26
|
-
4. Put your client globals file as webpack entry points like [this](https://github.com/shakacode/react-webpack-rails-tutorial/blob/537c985dc82faee333d80509343ca32a3965f9dd/client/webpack.client.rails.config.js#L22). Similar pattern for server rendering.
|
27
|
-
|
28
|
-
```javascript
|
29
|
-
config.entry.app.push('./app/startup/clientRegistration');
|
30
|
-
```
|
31
|
-
|
32
|
-
## Additional Steps For Server Rendering (option `prerender` shown below)
|
33
|
-
See the next section for a sample webpack.server.rails.config.js.
|
34
|
-
|
35
|
-
1. Expose your server globals like [this](https://github.com/shakacode/react-webpack-rails-tutorial/blob/537c985dc82faee333d80509343ca32a3965f9dd/client/app/startup/serverRegistration.jsx#L7)
|
36
|
-
|
37
|
-
```javascript
|
38
|
-
import App from './ServerApp';
|
39
|
-
global.App = App;
|
40
|
-
```
|
41
|
-
2. Make the server globals file an entry point in your webpack config, like [this](https://github.com/shakacode/react-webpack-rails-tutorial/blob/537c985dc82faee333d80509343ca32a3965f9dd/client/webpack.server.rails.config.js#L7)
|
42
|
-
|
43
|
-
```javascript
|
44
|
-
entry: ['./app/startup/serverRegistration'],
|
45
|
-
```
|
46
|
-
3. Ensure the name of your ouput file (shown [here](https://github.com/shakacode/react-webpack-rails-tutorial/blob/537c985dc82faee333d80509343ca32a3965f9dd/client/webpack.server.rails.config.js#L9)) of your server bundle corresponds to the configuration of the gem. The default path is `app/assets/webpack`. See below for customization of configuration variables.
|
47
|
-
4. Expose `React` in your webpack config, like [this](https://github.com/shakacode/react-webpack-rails-tutorial/blob/master/client/webpack.server.rails.build.config.js#L54-L55)
|
48
|
-
|
49
|
-
```javascript
|
50
|
-
{ test: require.resolve('react'), loader: 'expose?React' },
|
51
|
-
|
52
|
-
// For React 0.14
|
53
|
-
{ test: require.resolve('react-dom/server'), loader: 'expose?ReactDOMServer' }, // not in client one, only server
|
54
|
-
```
|
55
|
-
### Sample webpack.server.rails.build.config.js (ONLY for server rendering)
|
56
|
-
Be sure to check out the latest example version of [client/webpack.server.rails.build.config.js](https://github.com/shakacode/react-webpack-rails-tutorial/blob/master/client/webpack.server.rails.build.config.js).
|
57
|
-
|
58
|
-
```javascript
|
59
|
-
// Common webpack configuration for server bundle
|
60
|
-
|
61
|
-
module.exports = {
|
62
|
-
|
63
|
-
// the project dir
|
64
|
-
context: __dirname,
|
65
|
-
entry: ['./app/startup/serverRegistration'],
|
66
|
-
output: {
|
67
|
-
filename: 'server-bundle.js',
|
68
|
-
path: '../app/assets/webpack',
|
69
|
-
|
70
|
-
// CRITICAL to set libraryTarget: 'this' for enabling Rails to find the exposed modules IF you
|
71
|
-
// use the "expose" webpackfunctionality. See startup/serverRegistration.jsx.
|
72
|
-
// NOTE: This is NOT necessary if you use the syntax of global.MyComponent = MyComponent syntax.
|
73
|
-
// See http://webpack.github.io/docs/configuration.html#externals for documentation of this option
|
74
|
-
//libraryTarget: 'this',
|
75
|
-
},
|
76
|
-
resolve: {
|
77
|
-
extensions: ['', '.js', '.jsx'],
|
78
|
-
},
|
79
|
-
module: {
|
80
|
-
loaders: [
|
81
|
-
{test: /\.jsx?$/, loader: 'babel-loader', exclude: /node_modules/},
|
82
|
-
|
83
|
-
// React is necessary for the client rendering:
|
84
|
-
{ test: require.resolve('react'), loader: 'expose?React' },
|
85
|
-
{ test: require.resolve('react-dom/server'), loader: 'expose?ReactDOMServer' },
|
86
|
-
],
|
87
|
-
},
|
88
|
-
};
|
89
|
-
```
|
90
|
-
|
91
|
-
## What Happens?
|
92
|
-
|
93
|
-
Here's what the browser will render with a call to the `react_component` helper.
|
94
|
-
![2015-09-28_20-24-35](https://cloud.githubusercontent.com/assets/1118459/10157268/41435186-6624-11e5-9341-6fc4cf35ee90.png)
|
95
|
-
|
96
|
-
If you're curious as to what the gem generates for the server and client rendering, see [`spec/dummy/client/app/startup/serverRegistration.jsx`](https://github.com/shakacode/react_on_rails/blob/master/spec/dummy/spec/sample_generated_js/server-generated.js)
|
97
|
-
and [`spec/dummy/client/app/startup/ClientReduxApp.jsx`](https://github.com/shakacode/react_on_rails/blob/master/spec/dummy/spec/sample_generated_js/client-generated.js) for examples of this. Note, this is not the code that you are providing. You can see the client code by viewing the page source.
|
98
|
-
|
99
|
-
* **props**: [hash | string of json] Properties to pass to the react object. See this example if you're using Jbuilder: [react-webpack-rails-tutorial view rendering props using jBuilder](https://github.com/shakacode/react-webpack-rails-tutorial/blob/master/app/views/pages/index.html.erb#L20)
|
100
|
-
|
101
|
-
```erb
|
102
|
-
<%= react_component('App', render(template: "/comments/index.json.jbuilder"), prerender: true) %>
|
103
|
-
```
|
104
|
-
* **options:** [hash]
|
105
|
-
* **prerender**: <true/false> set to false when debugging!
|
106
|
-
* **trace**: <true/false> set to true to print additional debugging information in the browser default is true for development, off otherwise
|
107
|
-
* **replay_console**: <true/false> Default is true. False will disable echoing server rendering logs, which can make troubleshooting server rendering difficult.
|
108
|
-
* Any other options are passed to the content tag, including the id.
|
109
|
-
|
110
|
-
# JavaScript
|
111
|
-
|
112
|
-
1. Configure your webpack configuration to create the file used for server rendering if you plan to do server rendering.
|
113
|
-
2. Follow the examples in `spec/dummy/client/app/startup/clientRegistration.jsx` to expose your react components for client side rendering.
|
114
|
-
3. Follow the examples in `spec/dummy/client/app/startup/serverRegistration.jsx` to expose your react components for server side rendering. The code is the same, but you might be importing from a file specialized for server rendering.
|
115
|
-
|
116
|
-
## React 0.13 vs. React 0.14
|
117
|
-
We no longer support React 0.13.
|
@@ -1,33 +0,0 @@
|
|
1
|
-
# Optional Configuration
|
2
|
-
|
3
|
-
Create a file `config/react_on_rails.rb` to override any defaults (this file is automatically created for you when using the generator). If you don't specify this file, the default options are below.
|
4
|
-
|
5
|
-
The `server_bundle_js_file` must correspond to the bundle you want to use for server rendering.
|
6
|
-
|
7
|
-
```ruby
|
8
|
-
# Shown below are the defaults for configuration
|
9
|
-
ReactOnRails.configure do |config|
|
10
|
-
# Client bundles are configured in application.js
|
11
|
-
# Server bundle is a single file for all server rendering of components.
|
12
|
-
# Set the server_bundle_js_file to "" if you know that you will not be server rendering.
|
13
|
-
config.server_bundle_js_file = "server-bundle.js" # This is the default
|
14
|
-
|
15
|
-
# Below options can be overriden by passing to the helper method.
|
16
|
-
config.prerender = false # default is false
|
17
|
-
config.trace = Rails.env.development? # default is true for development, off otherwise
|
18
|
-
|
19
|
-
# For server rendering. This can be set to false so that server side messages are discarded.
|
20
|
-
config.replay_console = true # Default is true. Be cautious about turning this off.
|
21
|
-
config.logging_on_server = true # Default is true. Logs server rendering messags to Rails.logger.info
|
22
|
-
|
23
|
-
# Settings for the pool of renderers:
|
24
|
-
config.server_renderer_pool_size ||= 1 # ExecJS doesn't allow more than one on MRI
|
25
|
-
config.server_renderer_timeout ||= 20 # seconds
|
26
|
-
end
|
27
|
-
```
|
28
|
-
|
29
|
-
You can configure your pool of JS virtual machines and specify where it should load code:
|
30
|
-
|
31
|
-
- On MRI, use `therubyracer` for the best performance (see [discussion](https://github.com/reactjs/react-rails/pull/290))
|
32
|
-
- On MRI, you'll get a deadlock with `pool_size` > 1
|
33
|
-
- If you're using JRuby, you can increase `pool_size` to have real multi-threaded rendering.
|