react_on_rails 11.1.7 → 11.3.1.beta.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/.eslintrc +8 -2
- data/.prettierignore +1 -0
- data/.prettierrc +20 -0
- data/.release-it.json +3 -0
- data/.travis.yml +10 -9
- data/CHANGELOG.md +60 -3
- data/CONTRIBUTING.md +2 -10
- data/Gemfile +1 -2
- data/Gemfile.rails32 +0 -1
- data/README.md +30 -14
- data/SUMMARY.md +6 -2
- data/docs/additional-reading/{hot-reloading-rails-development.md → hot-reloading-rails-development-asset-pipeline.md} +2 -12
- data/docs/additional-reading/images.md +1 -1
- data/docs/additional-reading/rails_view_rendering_from_inline_javascript.md +2 -1
- data/docs/additional-reading/upgrade-webpacker-v3-to-v4.md +10 -0
- data/docs/api/view-helpers-api.md +12 -8
- data/docs/basics/configuration.md +4 -4
- data/docs/basics/generator-details.md +1 -1
- data/docs/basics/minitest-configuration.md +31 -0
- data/docs/basics/react-server-rendering.md +3 -1
- data/docs/basics/recommended-project-structure.md +24 -1
- data/docs/basics/rspec-configuration.md +2 -2
- data/docs/basics/upgrading-react-on-rails.md +11 -1
- data/docs/basics/webpack-configuration.md +11 -0
- data/docs/misc-pending/code-splitting.md +2 -2
- data/docs/misc-pending/manual-installation-overview.md +1 -1
- data/docs/testimonials/hvmn.md +25 -0
- data/docs/testimonials/resortpass.md +13 -0
- data/docs/testimonials/testimonials.md +28 -0
- data/docs/tutorial.md +123 -11
- data/lib/generators/react_on_rails/dev_tests_generator.rb +1 -0
- data/lib/generators/react_on_rails/install_generator.rb +2 -0
- data/lib/react_on_rails.rb +1 -0
- data/lib/react_on_rails/assets_precompile.rb +3 -0
- data/lib/react_on_rails/configuration.rb +2 -1
- data/lib/react_on_rails/git_utils.rb +2 -0
- data/lib/react_on_rails/helper.rb +71 -70
- data/lib/react_on_rails/json_output.rb +1 -1
- data/lib/react_on_rails/locales_to_js.rb +2 -0
- data/lib/react_on_rails/react_component/render_options.rb +4 -0
- data/lib/react_on_rails/server_rendering_js_code.rb +42 -0
- data/lib/react_on_rails/server_rendering_pool/ruby_embedded_java_script.rb +44 -14
- data/lib/react_on_rails/utils.rb +5 -1
- data/lib/react_on_rails/version.rb +1 -1
- data/lib/react_on_rails/version_checker.rb +4 -1
- data/lib/react_on_rails/webpacker_utils.rb +9 -1
- data/package-scripts.yml +46 -0
- data/package.json +24 -15
- data/rakelib/release.rake +3 -2
- data/react_on_rails.gemspec +1 -1
- data/webpackConfigLoader.js +2 -2
- data/yarn.lock +4431 -1689
- metadata +18 -10
- data/docs/testimonials.md +0 -11
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: fac1458d15f951224259dc1408c2950af8914d7dbc9529220a01a3e2665add94
|
4
|
+
data.tar.gz: d8b5e6d03dbc89385892b8e22db377c8639c8fe15d466db802c86d762f0cee39
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: c44ef75d3c44f87ee3be8037136fc11154a59fcaae31d223446a7e50621a4773955de4f61f36d7d2e062bb49ca60c771ce853278b21197d4c7842c1162bfb71f
|
7
|
+
data.tar.gz: ed423208f616c125bf8ff20e42a522ca9107df7f04cb7181815dc422886b066147c766804e2d58f1051604902186fdce05929237b17e5056cca1cdcaf96131fe
|
data/.eslintrc
CHANGED
@@ -1,8 +1,11 @@
|
|
1
1
|
---
|
2
|
-
extends:
|
2
|
+
extends:
|
3
|
+
- eslint-config-shakacode
|
4
|
+
- prettier
|
5
|
+
- prettier/react
|
3
6
|
|
4
7
|
plugins:
|
5
|
-
-
|
8
|
+
- prettier
|
6
9
|
|
7
10
|
globals:
|
8
11
|
__DEBUG_SERVER_ERRORS__: true
|
@@ -15,6 +18,9 @@ env:
|
|
15
18
|
|
16
19
|
rules:
|
17
20
|
no-console: 0
|
21
|
+
function-paren-newline: 0
|
22
|
+
object-curly-newline: 0
|
23
|
+
|
18
24
|
|
19
25
|
# https://github.com/benmosher/eslint-plugin-import/issues/340
|
20
26
|
import/no-extraneous-dependencies: 0
|
data/.prettierignore
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
node_modules
|
data/.prettierrc
ADDED
@@ -0,0 +1,20 @@
|
|
1
|
+
printWidth: 110
|
2
|
+
tabWidth: 2
|
3
|
+
useTabs: false
|
4
|
+
semi: true
|
5
|
+
singleQuote: true
|
6
|
+
trailingComma: all
|
7
|
+
bracketSpacing: true
|
8
|
+
jsxBracketSameLine: false
|
9
|
+
parser: flow
|
10
|
+
|
11
|
+
overrides:
|
12
|
+
- files: "*.@(css|scss)"
|
13
|
+
options:
|
14
|
+
parser: css
|
15
|
+
singleQuote: false
|
16
|
+
printWidth: 120
|
17
|
+
- files: "*.@(json)"
|
18
|
+
options:
|
19
|
+
parser: json
|
20
|
+
printWidth: 100
|
data/.release-it.json
ADDED
data/.travis.yml
CHANGED
@@ -4,10 +4,9 @@ language: ruby
|
|
4
4
|
|
5
5
|
rvm:
|
6
6
|
# Rails 5 requires 2.2
|
7
|
-
- 2.3
|
8
|
-
- 2.
|
9
|
-
- 2.
|
10
|
-
- 2.2.6
|
7
|
+
- 2.5.3
|
8
|
+
- 2.6.0
|
9
|
+
- 2.2.10
|
11
10
|
services:
|
12
11
|
- docker
|
13
12
|
|
@@ -36,7 +35,7 @@ before_install:
|
|
36
35
|
- "/sbin/start-stop-daemon --start --quiet --pidfile /tmp/custom_xvfb_99.pid --make-pidfile --background --exec /usr/bin/Xvfb -- :99 -ac -screen scn 1600x1200x16"
|
37
36
|
|
38
37
|
install:
|
39
|
-
- travis_retry gem install bundler
|
38
|
+
- travis_retry gem install bundler -v '<2' # Ruby 2.2 and Rails 3.2 & 4.2 depend on bundler 1.x.
|
40
39
|
- travis_retry nvm install 8.11.3
|
41
40
|
- node -v
|
42
41
|
- travis_retry npm i -g yarn
|
@@ -54,13 +53,15 @@ script:
|
|
54
53
|
matrix:
|
55
54
|
exclude:
|
56
55
|
- gemfile: spec/dummy_no_webpacker/Gemfile.rails32
|
57
|
-
rvm: 2.3.
|
56
|
+
rvm: 2.3.8
|
58
57
|
- gemfile: spec/dummy_no_webpacker/Gemfile.rails32
|
59
|
-
rvm: 2.4.
|
58
|
+
rvm: 2.4.5
|
60
59
|
- gemfile: spec/dummy_no_webpacker/Gemfile.rails32
|
61
|
-
rvm: 2.5.
|
60
|
+
rvm: 2.5.3
|
61
|
+
- gemfile: spec/dummy_no_webpacker/Gemfile.rails32
|
62
|
+
rvm: 2.6.0
|
62
63
|
- gemfile: spec/dummy/Gemfile
|
63
|
-
rvm: 2.2.
|
64
|
+
rvm: 2.2.10
|
64
65
|
|
65
66
|
notifications:
|
66
67
|
slack:
|
data/CHANGELOG.md
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
# Change Log
|
2
2
|
All notable changes to this project's source code will be documented in this file. Items under `Unreleased` is upcoming features that will be out in next version. NOTE: major versions of the npm module and the gem must be kept in sync.
|
3
3
|
|
4
|
-
Migration instructions for the major updates can be found [here](docs/basics/upgrading-react-on-rails.md#upgrading-to-version-9.md). Some smaller migration information can be found here.
|
4
|
+
Migration instructions for the major updates can be found [here](docs/basics/upgrading-react-on-rails.md#upgrading-to-version-9.md). Some smaller migration information can be found here.
|
5
5
|
|
6
6
|
## Need Help Migrating?
|
7
7
|
If you would like help in migrating between React on Rails versions or help with implementing server rendering, please contact [justin@shakacode.com](mailto:justin@shakacode.com) for information about our [ShakaCode Pro Support](https://www.shakacode.com/work/shakacode-pro-support.pdf).
|
@@ -15,6 +15,59 @@ Please follow the recommendations outlined at [keepachangelog.com](http://keepac
|
|
15
15
|
Changes since last non-beta release.
|
16
16
|
|
17
17
|
*Please add entries here for your pull requests that are not yet released.*
|
18
|
+
### [11.3.1] - 2020-10-01
|
19
|
+
#### Fixed
|
20
|
+
Update the init per backport of 12.0.3. [PR 1331](https://github.com/shakacode/react_on_rails/pull/1331)
|
21
|
+
by [justin808](https://github.com/justin808).
|
22
|
+
|
23
|
+
* Should fix issue 1330.
|
24
|
+
* Component not loading in Chrome, DOMContentLoaded not called.
|
25
|
+
* https://github.com/shakacode/react_on_rails/issues/1330
|
26
|
+
|
27
|
+
So long as the document is not loading, we can assume:
|
28
|
+
The document has finished loading and the document has been parsed
|
29
|
+
but sub-resources such as images, stylesheets and frames are still loading.
|
30
|
+
If lazy asynch loading is used, such as with loadable-components, then the init
|
31
|
+
function will install some handler that will properly know when to do hyrdation.
|
32
|
+
|
33
|
+
|
34
|
+
### [11.3.0] - 2019-04-20
|
35
|
+
#### Added
|
36
|
+
- Added method for retrieving any option from `render_options` [PR 1213](https://github.com/shakacode/react_on_rails/pull/1213)
|
37
|
+
by [ashgaliyev](https://github.com/ashgaliyev).
|
38
|
+
|
39
|
+
- html_options can now has option for 'tag' to add dynamically html element. like this: `html_options: { tag: "span" }`.
|
40
|
+
[PR 1208](https://github.com/shakacode/react_on_rails/pull/1208) by [tahsin352](https://github.com/tahsin352).
|
41
|
+
|
42
|
+
### [11.2.2] - 2018-12-24
|
43
|
+
#### Improved
|
44
|
+
- rails_context can more easily be called from controller methods. The mandatory param of server_side has been made optional.
|
45
|
+
|
46
|
+
### [11.2.1] - 2018-12-06
|
47
|
+
## MIGRATION for v11.2
|
48
|
+
- If using **React on Rails Pro**, upgrade react_on_rails_pro to a version >= 1.3.
|
49
|
+
|
50
|
+
#### Improved
|
51
|
+
- To support React v16, updated API for manually calling `ReactOnRails.render(name, props, domNodeId, hydrate)`. Added 3rd @param hydrate Pass truthy to update server rendered html. Default is falsey Any truthy values calls hydrate rather than render. [PR 1159](https://github.com/shakacode/react_on_rails/pull/1159) by [justin808](https://github.com/justin808) and [coopersamuel](https://github.com/coopersamuel).
|
52
|
+
|
53
|
+
- Enabled the use of webpack-dev-server with Server-side rendering. [PR 1173](https://github.com/shakacode/react_on_rails/pull/1173) by [justin808](https://github.com/justin808) and [judahmeek](https://github.com/judahmeek).
|
54
|
+
|
55
|
+
#### Changed
|
56
|
+
- Changed the default for:
|
57
|
+
```rb
|
58
|
+
config.raise_on_prerender_error = Rails.env.development?
|
59
|
+
```
|
60
|
+
|
61
|
+
Thus, developers will need to fix server rendering errors before continuing.
|
62
|
+
[PR 1145](https://github.com/shakacode/react_on_rails/pull/1145) by [justin808](https://github.com/justin808).
|
63
|
+
|
64
|
+
### 11.2.0 - 2018-12-06
|
65
|
+
Do not use. Unpublished. Caused by an issue with the release script.
|
66
|
+
|
67
|
+
### [11.1.8] - 2018-10-14
|
68
|
+
|
69
|
+
#### Improved
|
70
|
+
- Improved tutorial and support for HMR when using `rails/webpacker` for Webpack configuration. [PR 1156](https://github.com/shakacode/react_on_rails/pull/1156) by [justin808](https://github.com/justin808).
|
18
71
|
|
19
72
|
### [11.1.7] - 2018-10-10
|
20
73
|
#### Fixed
|
@@ -45,7 +98,7 @@ Changes since last non-beta release.
|
|
45
98
|
|
46
99
|
#### Fixed
|
47
100
|
- Tests now properly exit if the config.build_test_command fails!
|
48
|
-
- Source path for project using Webpacker would default to "app/javascript" even if when the node_modules
|
101
|
+
- Source path for project using Webpacker would default to "app/javascript" even if when the node_modules
|
49
102
|
directory was set to "client". Fix now makes the configuration of this crystal clear.
|
50
103
|
- renamed method RenderOptions.has_random_dom_id? to RenderOptions.random_dom_id? for rubocop rule.
|
51
104
|
[PR 1133](https://github.com/shakacode/react_on_rails/pull/1133) by [justin808](https://github.com/justin808)
|
@@ -834,7 +887,11 @@ Best done with Object destructing:
|
|
834
887
|
##### Fixed
|
835
888
|
- Fix several generator related issues.
|
836
889
|
|
837
|
-
[Unreleased]: https://github.com/shakacode/react_on_rails/compare/11.
|
890
|
+
[Unreleased]: https://github.com/shakacode/react_on_rails/compare/11.3.0...master
|
891
|
+
[11.3.0]: https://github.com/shakacode/react_on_rails/compare/11.2.2...11.3.0
|
892
|
+
[11.2.2]: https://github.com/shakacode/react_on_rails/compare/11.2.1...11.2.2
|
893
|
+
[11.2.1]: https://github.com/shakacode/react_on_rails/compare/11.1.8...11.2.1
|
894
|
+
[11.1.8]: https://github.com/shakacode/react_on_rails/compare/11.1.7...11.1.8
|
838
895
|
[11.1.7]: https://github.com/shakacode/react_on_rails/compare/11.1.6...11.1.7
|
839
896
|
[11.1.6]: https://github.com/shakacode/react_on_rails/compare/11.1.5...11.1.6
|
840
897
|
[11.1.5]: https://github.com/shakacode/react_on_rails/compare/11.1.4...11.1.5
|
data/CONTRIBUTING.md
CHANGED
@@ -107,7 +107,7 @@ cd spec/dummy
|
|
107
107
|
yarn
|
108
108
|
```
|
109
109
|
|
110
|
-
Note, yarn will run the `postinstall` script of `spec/dummy/client` which runs `yarn link` to
|
110
|
+
Note, yarn will run the `postinstall` script of `spec/dummy/client` which runs `yarn link` to set up a sym link to the parent package.
|
111
111
|
|
112
112
|
#### Example: Testing NPM changes with the dummy app
|
113
113
|
1. Add `console.log('Hello!')` [here](https://github.com/shakacode/react_on_rails/blob/master/node_package/src/clientStartup.js#L181) in `react_on_rails/node_package/src/clientStartup.js` to confirm we're getting an update to the node package.
|
@@ -127,14 +127,6 @@ _Note: running `npm i` automatically builds the npm package before installing. H
|
|
127
127
|
### Prereqs
|
128
128
|
After checking out the repo, making sure you have rvm and nvm setup (setup ruby and node), cd to `spec/dummy` and run `bin/setup` to install ruby dependencies. You can also run `bin/console` for an interactive prompt that will allow you to experiment.
|
129
129
|
|
130
|
-
Additionally, our RSpec tests use the poltergeist web driver. You will need to install the phantomjs node module:
|
131
|
-
|
132
|
-
```sh
|
133
|
-
yarn global add phantomjs-prebuilt
|
134
|
-
```
|
135
|
-
|
136
|
-
Note this *must* be installed globally for the dummy test project rspec runner to see it properly.
|
137
|
-
|
138
130
|
### Local Node Package
|
139
131
|
Because the example and dummy apps rely on the react-on-rails node package, they should link directly to your local version to pick up any changes you may have made to that package. To achieve this, switch to the dummy app's root directory and run this command below which runs something like [this script](spec/dummy/package.json#L14)
|
140
132
|
|
@@ -171,7 +163,7 @@ spec/dummy.
|
|
171
163
|
|
172
164
|
```sh
|
173
165
|
# Optionally change default selenium_firefox driver
|
174
|
-
export DRIVER=
|
166
|
+
export DRIVER=selenium_firefox
|
175
167
|
cd react_on_rails/
|
176
168
|
yarn run dummy:spec
|
177
169
|
```
|
data/Gemfile
CHANGED
@@ -30,12 +30,11 @@ gem "web-console", group: :development
|
|
30
30
|
# below are copied from spec/dummy/Gemfile
|
31
31
|
gem "capybara"
|
32
32
|
gem "capybara-screenshot"
|
33
|
-
gem "chromedriver-helper"
|
34
33
|
gem "launchy"
|
35
|
-
gem "poltergeist"
|
36
34
|
gem "rspec-rails"
|
37
35
|
gem "rspec-retry"
|
38
36
|
gem "selenium-webdriver"
|
37
|
+
gem "webdrivers", "~> 3.0"
|
39
38
|
gem "webpacker"
|
40
39
|
|
41
40
|
gem "equivalent-xml", github: "mbklein/equivalent-xml"
|
data/Gemfile.rails32
CHANGED
data/README.md
CHANGED
@@ -1,12 +1,10 @@
|
|
1
1
|
# ReactOnRails
|
2
2
|
|
3
|
-
[![License](https://img.shields.io/badge/license-mit-green.svg)](./LICENSE.md) [![Build Status](https://travis-ci.org/shakacode/react_on_rails.svg?branch=master)](https://travis-ci.org/shakacode/react_on_rails) [![
|
3
|
+
[![License](https://img.shields.io/badge/license-mit-green.svg)](./LICENSE.md) [![Build Status](https://travis-ci.org/shakacode/react_on_rails.svg?branch=master)](https://travis-ci.org/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) [![](https://ruby-gem-downloads-badge.herokuapp.com/react_on_rails?type=total)](https://rubygems.org/gems/react_on_rails)
|
4
4
|
|
5
5
|
React on Rails integrates Rails with (server rendering of) Facebook's [React](https://github.com/facebook/react) front-end framework.
|
6
6
|
|
7
|
-
|
8
|
-
|
9
|
-
ShakaCode is **[currently looking to hire](http://www.shakacode.com/about/#work-with-us)** like-minded developers that wish to work on our projects, including [Hawaii Chee](https://www.hawaiichee.com). Your main coding interview will be pairing with us on our open source! We're getting into [Reason](https://reasonml.github.io/)!
|
7
|
+
Interested in optimizing your webpack setup for React on Rails including code splitting with react-router v4, webpack v4, and react-loadable with server side rendering? [Contact Justin Gordon](mailto:justin@shakacode.com).
|
10
8
|
|
11
9
|
# Intro
|
12
10
|
|
@@ -16,14 +14,16 @@ To provide an opinionated and optimal framework for integrating Ruby on Rails wi
|
|
16
14
|
|
17
15
|
## Features and Why React on Rails?
|
18
16
|
|
19
|
-
Given that rails/webpacker gem already provides basic React integration, why would you use "React on Rails"?
|
17
|
+
Given that rails/webpacker gem already provides basic React integration, why would you use "React on Rails"?
|
20
18
|
|
21
|
-
1.
|
22
|
-
1.
|
19
|
+
1. Server rendering, often used for SEO crawler indexing and UX performance, is not offered by rails/webpacker.
|
20
|
+
1. The easy passing of props directly from your Rails view to your React components rather than having your Rails view load and then make a separate request to your API.
|
21
|
+
1. [Redux](https://github.com/reactjs/redux) and [React Router](https://github.com/reactjs/react-router) integration with server-side-rendering.
|
23
22
|
1. [Internationalization (I18n) and (localization)](https://github.com/shakacode/react_on_rails/blob/master/docs/basics/i18n.md)
|
24
|
-
1. [RSpec Test Helpers Configuration](docs/basics/rspec-configuration.md) to ensure your Webpack bundles are ready for tests.
|
23
|
+
1. [RSpec Test Helpers Configuration](docs/basics/rspec-configuration.md) to ensure your Webpack bundles are ready for tests. _(and for [Minitest](docs/basics/minitest-configuration.md))._
|
25
24
|
1. A supportive community. This [web search shows how live public sites are using React on Rails](https://publicwww.com/websites/%22react-on-rails%22++-undeveloped.com/).
|
26
|
-
1. [Reason ML Support](https://github.com/shakacode/reason-react-on-rails-example)
|
25
|
+
1. [Reason ML Support](https://github.com/shakacode/reason-react-on-rails-example).
|
26
|
+
|
27
27
|
|
28
28
|
See the [react-webpack-rails-tutorial](https://github.com/shakacode/react-webpack-rails-tutorial) for an example of a live implementation and code.
|
29
29
|
|
@@ -35,8 +35,9 @@ _Requires creating a free account._
|
|
35
35
|
|
36
36
|
React on Rails Pro provides Node server rendering and other performance enhancements for React on Rails.
|
37
37
|
|
38
|
-
![2018-09-11_10-31-11](https://user-images.githubusercontent.com/1118459/45467845-5bcc7400-b6bd-11e8-91e1-e0cf806d4ea4.png)
|
38
|
+
[![2018-09-11_10-31-11](https://user-images.githubusercontent.com/1118459/45467845-5bcc7400-b6bd-11e8-91e1-e0cf806d4ea4.png)](https://blog.shakacode.com/hvmns-90-reduction-in-server-response-time-from-react-on-rails-pro-eb08226687db)
|
39
39
|
|
40
|
+
* [HVMN Testimonial, by Paul Benigeri, October 12, 2018](./docs/testimonials/hvmn.md)
|
40
41
|
* [HVMN’s 90% Reduction in Server Response Time from React on Rails Pro](https://blog.shakacode.com/hvmns-90-reduction-in-server-response-time-from-react-on-rails-pro-eb08226687db)
|
41
42
|
* [Egghead React on Rails Pro Deployment Highlights](https://github.com/shakacode/react_on_rails/wiki/Egghead-React-on-Rails-Pro-Deployment-Highlights)
|
42
43
|
|
@@ -59,6 +60,14 @@ Please [email me (Justin Gordon), the creator of React on Rails](mailto:justin@s
|
|
59
60
|
|
60
61
|
## Testimonials for Hiring ShakaCode and our "Pro Support"
|
61
62
|
|
63
|
+
[HVMN Testimonial, Written by Paul Benigeri, October 12, 2018](./docs/testimonials/hvmn.md)
|
64
|
+
|
65
|
+
> The price we paid for the consultation + the React on Rails pro license has already been made back a couple of times from hosting fees alone. The entire process was super hands off, and our core team was able to focus on shipping new feature during that sprint.
|
66
|
+
|
67
|
+
[ResortPass Testimonial, by Leora Juster, December 10, 2018](./docs/testimonials/resortpass.md)
|
68
|
+
|
69
|
+
> Justin and his team were instrumental in assisting us in setting design foundations and standards for our transition to a react on rails application. Just three months of work with the team at Shaka code and we have a main page of our application server-side rendering at exponentially improved speeds.
|
70
|
+
|
62
71
|
From Kyle Maune of Cooper Aerial, May 4, 2018
|
63
72
|
|
64
73
|
![image](https://user-images.githubusercontent.com/1118459/40891236-9b0b406e-671d-11e8-80ee-c026dbd1d5a2.png)
|
@@ -86,7 +95,7 @@ Note, the best way to understand how to use ReactOnRails is to study a few simpl
|
|
86
95
|
1. Do the quick [tutorial](docs/tutorial.md).
|
87
96
|
2. Add React on Rails to an existing Rails app per [the instructions](docs/basics/installation-into-an-existing-rails-app.md).
|
88
97
|
3. Look at [spec/dummy](spec/dummy), a simple, no DB example.
|
89
|
-
3. Look at [github.com/shakacode/react-webpack-rails-tutorial](https://github.com/shakacode/react-webpack-rails-tutorial); it's a full
|
98
|
+
3. Look at [github.com/shakacode/react-webpack-rails-tutorial](https://github.com/shakacode/react-webpack-rails-tutorial); it's a full-featured example live at [www.reactrails.com](http://www.reactrails.com).
|
90
99
|
|
91
100
|
## Basic Installation
|
92
101
|
|
@@ -262,7 +271,7 @@ ReactOnRails will automatically detect a registered generator function. Thus, th
|
|
262
271
|
|
263
272
|
Another reason to use a generator function is that sometimes in server rendering, specifically with React Router, you need to return the result of calling ReactDOMServer.renderToString(element). You can do this by returning an object with the following shape: { renderedHtml, redirectLocation, error }. Make sure you use this function with `react_component_hash`.
|
264
273
|
|
265
|
-
For server rendering, if you wish to return multiple HTML strings from a generator function, you may return an Object from your generator function with a single top
|
274
|
+
For server rendering, if you wish to return multiple HTML strings from a generator function, you may return an Object from your generator function with a single top-level property of `renderedHtml`. Inside this Object, place a key called `componentHtml`, along with any other needed keys. An example scenario of this is when you are using side effects libraries like [React Helmet](https://github.com/nfl/react-helmet). Your Ruby code will get this Object as a Hash containing keys componentHtml and any other custom keys that you added:
|
266
275
|
|
267
276
|
```js
|
268
277
|
{ renderedHtml: { componentHtml, customKey1, customKey2} }
|
@@ -288,7 +297,7 @@ Here are some highly recommended next articles to read:
|
|
288
297
|
1. [How React on Rails Works](./docs/basics/how-react-on-rails-works.md)
|
289
298
|
1. [Recommended Project Structure](./docs/basics/recommended-project-structure.md)
|
290
299
|
1. [Webpack Configuration](./docs/basics/webpack-configuration.md)
|
291
|
-
1. [View Helpers API](./docs/view-helpers-api.md)
|
300
|
+
1. [View Helpers API](./docs/api/view-helpers-api.md)
|
292
301
|
1. [Caching and Performance: React on Rails Pro](https://github.com/shakacode/react_on_rails/wiki).
|
293
302
|
1. [Deployment](docs/basics/deployment.md).
|
294
303
|
|
@@ -317,15 +326,22 @@ Bug reports and pull requests are welcome. See [Contributing](CONTRIBUTING.md) t
|
|
317
326
|
|
318
327
|
# Supporters
|
319
328
|
|
320
|
-
The following companies support this open source project, and ShakaCode uses their products! Justin writes React on Rails on [RubyMine](https://www.jetbrains.com/ruby/). We use [Scout](https://scoutapp.com/) to monitor the live performance of [HawaiiChee.com](https://www.hawaiichee.com),
|
329
|
+
The following companies support this open source project, and ShakaCode uses their products! Justin writes React on Rails on [RubyMine](https://www.jetbrains.com/ruby/). We use [Scout](https://scoutapp.com/) to monitor the live performance of [HawaiiChee.com](https://www.hawaiichee.com), [BrowserStack](https://www.browserstack.com) to solve problems with oddball browsers, and [CodersRank](https://codersrank.io/) to find candidates for our team.
|
321
330
|
|
322
331
|
[![Scout](https://user-images.githubusercontent.com/1118459/41828269-106b40f8-77d0-11e8-8d19-9c4b167ef9d8.png)](https://scoutapp.com/)
|
323
332
|
[![BrowserStack](https://cloud.githubusercontent.com/assets/1118459/23203304/1261e468-f886-11e6-819e-93b1a3f17da4.png)](https://www.browserstack.com)
|
333
|
+
[![CodersRank](https://user-images.githubusercontent.com/1118459/55040254-ad8a7b00-4fcb-11e9-8936-c6765eb30698.png)](https://codersrank.io/?utm_source=github&utm_medium=banner&utm_campaign=shakacode)
|
334
|
+
|
335
|
+
## Clubhouse
|
336
|
+
I've just moved ShakaCode's development to [ClubHouse](https://clubhouse.io/) from Trello. We're going to be doing this with all our projects. If you want to **try ClubHouse and get 2 months free beyond the 14-day trial period**, click [here to use ShakaCode's referral code](http://r.clbh.se/mvfd30S). We're participating in their awesome triple-sided referral program, which you can read about [here](https://clubhouse.io/blog/clubhouse-referral-program-5f614bb437c3). By using our [referral code](http://r.clbh.se/mvfd30S) you'll be supporting ShakaCode and, thus, React on Rails!
|
324
337
|
|
325
338
|
*If you'd like to support React on Rails and have your company listed here, [get in touch](mailto:justin@shakacode.com).*
|
326
339
|
|
327
340
|
Aloha and best wishes from Justin and the ShakaCode team!
|
328
341
|
|
342
|
+
# Work with Us
|
343
|
+
ShakaCode is **[currently looking to hire](http://www.shakacode.com/about/#work-with-us)** like-minded, remote-first, developers that wish to work on our projects, including [Hawaii Chee](https://www.hawaiichee.com). Your main coding interview will be pairing with us on our open source! We're getting into [Reason](https://reasonml.github.io/)!
|
344
|
+
|
329
345
|
# License
|
330
346
|
|
331
347
|
The gem is available as open source under the terms of the [MIT License](LICENSE.md).
|
data/SUMMARY.md
CHANGED
@@ -6,12 +6,15 @@
|
|
6
6
|
+ [React on Rails Basic Installation Tutorial](./docs/tutorial.md)
|
7
7
|
+ [Webpack Configuration](./docs/basics/webpack-configuration.md)
|
8
8
|
+ [How React on Rails Works](./docs/basics/how-react-on-rails-works.md)
|
9
|
+
+ [Client vs. Server Rendering](./docs/basics/client-vs-server-rendering.md)
|
10
|
+
+ [React Server Rendering](./docs/basics/react-server-rendering.md)
|
9
11
|
+ [Recommended Project Structure](./docs/basics/recommended-project-structure.md)
|
10
12
|
+ [Generator Functions and the RailsContext](docs/basics/generator-functions-and-railscontext.md)
|
11
13
|
+ [Caching and Performance: React on Rails Pro](https://github.com/shakacode/react_on_rails/wiki).
|
12
14
|
+ [Deployment](docs/basics/deployment.md).
|
13
15
|
+ [React on Rails Internationalization (I18n, localization)](docs/basics/i18n.md)
|
14
16
|
+ [RSpec Test Helpers Configuration](docs/basics/rspec-configuration.md)
|
17
|
+
+ [Minitest Configuration](docs/basics/minitest-configuration.md)
|
15
18
|
+ [Upgrading React on Rails](docs/basics/upgrading-react-on-rails.md)
|
16
19
|
|
17
20
|
## **API**
|
@@ -24,6 +27,7 @@
|
|
24
27
|
+ [Generator Details](docs/basics/generator-details.md)
|
25
28
|
+ [Updating Dependencies](./docs/additional-reading/updating-dependencies.md)
|
26
29
|
+ [Manual Installation Overview](docs/misc-pending/manual-installation-overview.md)
|
30
|
+
+ [Upgrading from rails/webpacker v3 to v4](docs/additional-reading/upgrade-webpacker-v3-to-v4.md)
|
27
31
|
|
28
32
|
## **Rails**
|
29
33
|
+ [Rails Engine Integration](./docs/additional-reading/rails-engine-integration.md)
|
@@ -37,7 +41,7 @@
|
|
37
41
|
+ [Babel](./docs/additional-reading/babel.md)
|
38
42
|
+ [React Router](./docs/additional-reading/react-router.md)
|
39
43
|
+ [React & Redux](./docs/additional-reading/react-and-redux.md)
|
40
|
-
+ [Webpack Tips](./docs/additional-reading/webpack
|
44
|
+
+ [Webpack Tips](./docs/additional-reading/webpack.md)
|
41
45
|
+ [Server Rendering Tips](./docs/additional-reading/server-rendering-tips.md)
|
42
46
|
+ [Code Splitting](docs/misc-pending/code-splitting.md)
|
43
47
|
+ [AngularJS Integration and Migration to React on Rails](./docs/additional-reading/angular-js-integration-migration.md)
|
@@ -50,7 +54,7 @@
|
|
50
54
|
+ [Setting up Hot Reloading during Rails Development, API docs](./docs/api/ruby-api-hot-reload-view-helpers.md)
|
51
55
|
+ [Developing with the Webpack Dev Server](./docs/additional-reading/webpack-dev-server.md)
|
52
56
|
+ [Webpack, the Asset Pipeline, and Using Assets w/ React](./docs/additional-reading/rails-assets-relative-paths.md)
|
53
|
-
+ [Hot Reloading of Assets For Rails Development](
|
57
|
+
+ [Hot Reloading of Assets For Rails Development for Asset Pipeline](docs/additional-reading/hot-reloading-rails-development-asset-pipeline.md)
|
54
58
|
|
55
59
|
## **[CONTRIBUTING](CONTRIBUTING.md)**
|
56
60
|
+ [Generator Testing](./docs/contributor-info/generator-testing.md)
|
@@ -1,19 +1,9 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
The use of the [webpack-dev-server](https://webpack.js.org/configuration/dev-server/) provides "Live Reloading" by default. The difference between live and hot reloading is that live reloading will act similarly to hitting refresh in the browser. Hot reloading will attempt to preserve the state of any props.
|
4
|
-
|
5
|
-
See the Webpack document [Hot Module Replacement](https://webpack.js.org/concepts/hot-module-replacement/) for more details on the concepts of live vs. hot reloading.
|
6
|
-
|
7
|
-
The remainder of this document discusses HMR.
|
8
|
-
|
9
|
-
# Using the Webpacker Webpack setup
|
10
|
-
|
11
|
-
If you are using the default Webpacker setup of running the dev server with `bin/webpack-dev-server`, see the [Webpacker Webpack Dev Server discussion of HMR](https://github.com/rails/webpacker/blob/master/docs/webpack-dev-server.md#hot-module-replacement).
|
1
|
+
*This document should only be referenced if you're **NOT** using the current technique of the rails/webpacker helpers to place your client-side assets in your `/public` directory.*
|
12
2
|
|
13
3
|
|
14
4
|
# Hot Reloading of Assets For Rails Development
|
15
5
|
|
16
|
-
|
6
|
+
_See [PR #865](https://github.com/shakacode/react_on_rails/pull/865) for a detailed example of doing hot reloading using V8+ with Webpack v2. See [#772](https://github.com/shakacode/react_on_rails/issues/772) and [#361](https://github.com/shakacode/react-webpack-rails-tutorial/issues/361)._
|
17
7
|
|
18
8
|
------
|
19
9
|
|
@@ -39,7 +39,7 @@ const assetLoaderRules = [
|
|
39
39
|
|
40
40
|
|
41
41
|
|
42
|
-
A full example can be found at [spec/dummy/client/app/components/ImageExample/ImageExample.
|
42
|
+
A full example can be found at [spec/dummy/client/app/components/ImageExample/ImageExample.jsx](../../spec/dummy/client/app/components/ImageExample/ImageExample.jsx)
|
43
43
|
|
44
44
|
You are free to use images either in image tags or as background images in SCSS files. You can
|
45
45
|
use a "global" location of /client/app/assets/images or a relative path to your JS or SCSS file, as
|
@@ -12,9 +12,10 @@ You can easily render React components in your JavaScript with `render` method t
|
|
12
12
|
* @param name Name of your registered component
|
13
13
|
* @param props Props to pass to your component
|
14
14
|
* @param domNodeId
|
15
|
+
* @param hydrate [optional] Pass truthy to update server rendered html. Default is falsy
|
15
16
|
* @returns {virtualDomElement} Reference to your component's backing instance
|
16
17
|
*/
|
17
|
-
ReactOnRails.render(componentName, props,
|
18
|
+
ReactOnRails.render(componentName, props, domNodeId)
|
18
19
|
```
|
19
20
|
|
20
21
|
## Why do we need this?
|