react_on_rails 6.9.3 → 6.10.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/CHANGELOG.md +11 -2
- data/KUDOS.md +5 -0
- data/README.md +6 -2
- data/SUMMARY.md +1 -0
- data/app/helpers/react_on_rails_helper.rb +83 -15
- data/docs/additional-reading/elastic-beanstalk.md +43 -0
- data/docs/additional-reading/react-helmet.md +78 -0
- data/docs/additional-reading/rspec-configuration.md +13 -1
- data/docs/additional-reading/turbolinks.md +10 -1
- data/docs/api/javascript-api.md +8 -0
- data/docs/basics/i18n.md +1 -1
- data/lib/generators/react_on_rails/templates/base/base/client/app/bundles/HelloWorld/components/HelloWorld.jsx +2 -1
- data/lib/generators/react_on_rails/templates/base/base/client/package.json.tt +9 -9
- data/lib/generators/react_on_rails/templates/redux/base/client/app/bundles/HelloWorld/components/HelloWorld.jsx +2 -1
- data/lib/react_on_rails/version.rb +1 -1
- data/package.json +18 -16
- data/yarn.lock +435 -366
- metadata +4 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 469a8ff901950ef0d6b78f656e2171745ba38692
|
|
4
|
+
data.tar.gz: 53d686b193981bfc42b256f8f37092a025b34a87
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: af358a7afeebd6dab050233da74ba44c2f92ad2445ea0ca6c07874d1809392b77c8c1c74075756c71ea365210da26c8e9ef7013b2d531c78aca1dc43126c930d
|
|
7
|
+
data.tar.gz: f3f5dfb830d68e6aa8638301267f0697a9940812663f125e848b5533489e26e0fddc279a4c8b23cf153e8fd1806a1972cea5a14a038a4f4db2bb2e398cf1daeb
|
data/CHANGELOG.md
CHANGED
|
@@ -4,10 +4,18 @@ All notable changes to this project's source code will be documented in this fil
|
|
|
4
4
|
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.
|
|
5
5
|
|
|
6
6
|
## [Unreleased]
|
|
7
|
+
|
|
8
|
+
## [6.10.0] - 2017-04-13
|
|
9
|
+
### Added
|
|
10
|
+
- Add an ability to return multiple HTML strings in a `Hash` as a result of `react_component` method call. Allows to build `<head>` contents with [React Helmet](https://github.com/nfl/react-helmet). [#800](https://github.com/shakacode/react_on_rails/pull/800) by [udovenko](https://github.com/udovenko).
|
|
11
|
+
|
|
12
|
+
### Fixed
|
|
13
|
+
- Fix PropTypes, createClass deprecation warnings for React 15.5.x. [#804](https://github.com/shakacode/react_on_rails/pull/804) by [udovenko ](https://github.com/udovenko).
|
|
14
|
+
|
|
7
15
|
## [6.9.3] - 2017-04-03
|
|
8
16
|
|
|
9
17
|
### Fixed
|
|
10
|
-
- Removed call of to_json on strings when formatting props. [#791](https://github.com/shakacode/react_on_rails/pull/791) by [justin808](https://github.com/justin808)
|
|
18
|
+
- Removed call of to_json on strings when formatting props. [#791](https://github.com/shakacode/react_on_rails/pull/791) by [justin808](https://github.com/justin808).
|
|
11
19
|
|
|
12
20
|
## [6.9.2] - 2017-04-02
|
|
13
21
|
|
|
@@ -522,7 +530,8 @@ Best done with Object destructing:
|
|
|
522
530
|
##### Fixed
|
|
523
531
|
- Fix several generator related issues.
|
|
524
532
|
|
|
525
|
-
[Unreleased]: https://github.com/shakacode/react_on_rails/compare/6.
|
|
533
|
+
[Unreleased]: https://github.com/shakacode/react_on_rails/compare/6.10.0...master
|
|
534
|
+
[6.10.0]: https://github.com/shakacode/react_on_rails/compare/6.9.3...6.10.0
|
|
526
535
|
[6.9.3]: https://github.com/shakacode/react_on_rails/compare/6.9.1...6.9.3
|
|
527
536
|
[6.9.2]: https://github.com/shakacode/react_on_rails/compare/6.9.1...6.9.2
|
|
528
537
|
[6.9.1]: https://github.com/shakacode/react_on_rails/compare/6.8.2...6.9.1
|
data/KUDOS.md
CHANGED
|
@@ -2,6 +2,11 @@ This is a sibling file to [PROJECTS.md](./PROJECTS.md).
|
|
|
2
2
|
|
|
3
3
|
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!
|
|
4
4
|
|
|
5
|
+
## April 6, 2017 on Medium
|
|
6
|
+
[Adding react to your node app](https://medium.com/@Tswaynee/adding-react-to-your-node-app-8707c5464b3)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
|
|
5
10
|
### March 23, 2017
|
|
6
11
|
Github issue [#766](https://github.com/shakacode/react_on_rails/issues/766).
|
|
7
12
|
|
data/README.md
CHANGED
|
@@ -47,7 +47,8 @@ For more testimonials, see [Live Projects](PROJECTS.md) and [Kudos](./KUDOS.md).
|
|
|
47
47
|
* [284 Ruby Rogues: React on Rails with Justin Gordon and Rob Wise](https://devchat.tv/ruby-rogues/284-rr-react-on-rails-with-justin-gordon-and-rob-wise)
|
|
48
48
|
|
|
49
49
|
# NEWS
|
|
50
|
-
* 2017-04-
|
|
50
|
+
* 2017-04-09: 7.0.0 beta work to include webpacker_lite gem has begun. See [#786](https://github.com/shakacode/react_on_rails/issues/786).
|
|
51
|
+
* 2017-04-03: 6.9.3 Released! Props rendered in JSON script tag. Page size is smaller now due to less escaping!
|
|
51
52
|
* 2017-03-06: Updated to Webpack v2!
|
|
52
53
|
* 2017-03-02: Demo of internationalization (i18n) is live at [reactrails.com](https://www.reactrails.com/). Docs [here](docs/basics/i18n.md).
|
|
53
54
|
* 2017-02-28: See [discussions here on Webpacker](https://github.com/rails/webpacker/issues/139) regarding how Webpacker will allow React on Rails to avoid using the asset pipeline in the near future.
|
|
@@ -337,7 +338,10 @@ If you do want different code to run, you'd setup a separate webpack compilation
|
|
|
337
338
|
#### Generator Functions
|
|
338
339
|
Why would you create a function that returns a React component? For example, you may want the ability to use the passed-in props to initialize a redux store or setup react-router. Or you may want to return different components depending on what's in the props. ReactOnRails will automatically detect a registered generator function.
|
|
339
340
|
|
|
340
|
-
Another reason to
|
|
341
|
+
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 }.
|
|
342
|
+
|
|
343
|
+
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. This is useful when you 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:
|
|
344
|
+
{ renderedHtml: { componentHtml, customKey1, customKey2} }
|
|
341
345
|
|
|
342
346
|
#### Renderer Functions
|
|
343
347
|
A renderer function is a generator function that accepts three arguments: `(props, railsContext, domNodeId) => { ... }`. Instead of returning a React component, a renderer is responsible for calling `ReactDOM.render` to manually render a React component into the dom. Why would you want to call `ReactDOM.render` yourself? One possible use case is [code splitting](./docs/additional-reading/code-splitting.md).
|
data/SUMMARY.md
CHANGED
|
@@ -31,6 +31,7 @@
|
|
|
31
31
|
+ [Generator Tips](./docs/basics/generator.md)
|
|
32
32
|
+ [Hot Reloading of Assets For Rails Development](./docs/additional-reading/hot-reloading-rails-development.md)
|
|
33
33
|
+ [Heroku Deployment](./docs/additional-reading/heroku-deployment.md)
|
|
34
|
+
+ [Elastic Beanstalk Deployment](./docs/additional-reading/elastic-beanstalk.md)
|
|
34
35
|
+ [Updating Dependencies](./docs/additional-reading/updating-dependencies.md)
|
|
35
36
|
|
|
36
37
|
### **API**
|
|
@@ -10,6 +10,8 @@ require "react_on_rails/utils"
|
|
|
10
10
|
module ReactOnRailsHelper
|
|
11
11
|
include ReactOnRails::Utils::Required
|
|
12
12
|
|
|
13
|
+
COMPONENT_HTML_KEY = "componentHtml".freeze
|
|
14
|
+
|
|
13
15
|
# The env_javascript_include_tag and env_stylesheet_link_tag support the usage of a webpack
|
|
14
16
|
# dev server for providing the JS and CSS assets during development mode. See
|
|
15
17
|
# https://github.com/shakacode/react-webpack-rails-tutorial/ for a working example.
|
|
@@ -117,21 +119,23 @@ module ReactOnRailsHelper
|
|
|
117
119
|
server_rendered_html = result["html"]
|
|
118
120
|
console_script = result["consoleReplayScript"]
|
|
119
121
|
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
122
|
+
if server_rendered_html.is_a?(String)
|
|
123
|
+
build_react_component_result_for_server_rendered_string(
|
|
124
|
+
server_rendered_html: server_rendered_html,
|
|
125
|
+
component_specification_tag: component_specification_tag,
|
|
126
|
+
console_script: console_script,
|
|
127
|
+
options: options
|
|
128
|
+
)
|
|
129
|
+
elsif server_rendered_html.is_a?(Hash)
|
|
130
|
+
build_react_component_result_for_server_rendered_hash(
|
|
131
|
+
server_rendered_html: server_rendered_html,
|
|
132
|
+
component_specification_tag: component_specification_tag,
|
|
133
|
+
console_script: console_script,
|
|
134
|
+
options: options
|
|
135
|
+
)
|
|
136
|
+
else
|
|
137
|
+
raise "server_rendered_html expected to be a String or a Hash."
|
|
138
|
+
end
|
|
135
139
|
end
|
|
136
140
|
|
|
137
141
|
# Separate initialization of store from react_component allows multiple react_component calls to
|
|
@@ -222,6 +226,70 @@ module ReactOnRailsHelper
|
|
|
222
226
|
|
|
223
227
|
private
|
|
224
228
|
|
|
229
|
+
def build_react_component_result_for_server_rendered_string(
|
|
230
|
+
server_rendered_html: required("server_rendered_html"),
|
|
231
|
+
component_specification_tag: required("component_specification_tag"),
|
|
232
|
+
console_script: required("console_script"),
|
|
233
|
+
options: required("options")
|
|
234
|
+
)
|
|
235
|
+
content_tag_options = options.html_options
|
|
236
|
+
content_tag_options[:id] = options.dom_id
|
|
237
|
+
|
|
238
|
+
rendered_output = content_tag(:div,
|
|
239
|
+
server_rendered_html.html_safe,
|
|
240
|
+
content_tag_options)
|
|
241
|
+
|
|
242
|
+
result_console_script = options.replay_console ? console_script : ""
|
|
243
|
+
result = compose_react_component_html_with_spec_and_console(
|
|
244
|
+
component_specification_tag, rendered_output, result_console_script
|
|
245
|
+
)
|
|
246
|
+
|
|
247
|
+
prepend_render_rails_context(result)
|
|
248
|
+
end
|
|
249
|
+
|
|
250
|
+
def build_react_component_result_for_server_rendered_hash(
|
|
251
|
+
server_rendered_html: required("server_rendered_html"),
|
|
252
|
+
component_specification_tag: required("component_specification_tag"),
|
|
253
|
+
console_script: required("console_script"),
|
|
254
|
+
options: required("options")
|
|
255
|
+
)
|
|
256
|
+
content_tag_options = options.html_options
|
|
257
|
+
content_tag_options[:id] = options.dom_id
|
|
258
|
+
|
|
259
|
+
unless server_rendered_html[COMPONENT_HTML_KEY]
|
|
260
|
+
raise "server_rendered_html hash expected to contain \"#{COMPONENT_HTML_KEY}\" key."
|
|
261
|
+
end
|
|
262
|
+
|
|
263
|
+
rendered_output = content_tag(:div,
|
|
264
|
+
server_rendered_html[COMPONENT_HTML_KEY].html_safe,
|
|
265
|
+
content_tag_options)
|
|
266
|
+
|
|
267
|
+
result_console_script = options.replay_console ? console_script : ""
|
|
268
|
+
result = compose_react_component_html_with_spec_and_console(
|
|
269
|
+
component_specification_tag, rendered_output, result_console_script
|
|
270
|
+
)
|
|
271
|
+
|
|
272
|
+
# Other HTML strings need to be marked as html_safe too:
|
|
273
|
+
server_rendered_hash_except_component = server_rendered_html.except(COMPONENT_HTML_KEY)
|
|
274
|
+
server_rendered_hash_except_component.each do |key, html_string|
|
|
275
|
+
server_rendered_hash_except_component[key] = html_string.html_safe
|
|
276
|
+
end
|
|
277
|
+
|
|
278
|
+
result_with_rails_context = prepend_render_rails_context(result)
|
|
279
|
+
{ COMPONENT_HTML_KEY => result_with_rails_context }.merge(
|
|
280
|
+
server_rendered_hash_except_component
|
|
281
|
+
)
|
|
282
|
+
end
|
|
283
|
+
|
|
284
|
+
def compose_react_component_html_with_spec_and_console(component_specification_tag, rendered_output, console_script)
|
|
285
|
+
# IMPORTANT: Ensure that we mark string as html_safe to avoid escaping.
|
|
286
|
+
<<-HTML.html_safe
|
|
287
|
+
#{component_specification_tag}
|
|
288
|
+
#{rendered_output}
|
|
289
|
+
#{console_script}
|
|
290
|
+
HTML
|
|
291
|
+
end
|
|
292
|
+
|
|
225
293
|
def json_safe_and_pretty(hash_or_string)
|
|
226
294
|
# if Rails.env.development?
|
|
227
295
|
# # TODO: for json_safe_and_pretty
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
# Deploying React on Rails to Elastic Beanstalk
|
|
2
|
+
|
|
3
|
+
In order to deploy a React on Rails app to elastic beanstalk, you must install yarn on each instance.
|
|
4
|
+
If yarn is not installed, asset compilation will fail on the elastic beanstalk instance.
|
|
5
|
+
|
|
6
|
+
You can install yarn by adding a `yarn.config` file to your `.ebextensions` folder which contains these commands.
|
|
7
|
+
|
|
8
|
+
```
|
|
9
|
+
commands:
|
|
10
|
+
|
|
11
|
+
01_node_get:
|
|
12
|
+
cwd: /tmp
|
|
13
|
+
command: 'sudo curl --silent --location https://rpm.nodesource.com/setup_6.x | sudo bash -'
|
|
14
|
+
|
|
15
|
+
02_node_install:
|
|
16
|
+
cwd: /tmp
|
|
17
|
+
command: 'sudo yum -y install nodejs'
|
|
18
|
+
|
|
19
|
+
03_yarn_get:
|
|
20
|
+
cwd: /tmp
|
|
21
|
+
# don't run the command if yarn is already installed (file /usr/bin/yarn exists)
|
|
22
|
+
test: '[ ! -f /usr/bin/yarn ] && echo "yarn not installed"'
|
|
23
|
+
command: 'sudo wget https://dl.yarnpkg.com/rpm/yarn.repo -O /etc/yum.repos.d/yarn.repo'
|
|
24
|
+
|
|
25
|
+
04_yarn_install:
|
|
26
|
+
cwd: /tmp
|
|
27
|
+
test: '[ ! -f /usr/bin/yarn ] && echo "yarn not installed"'
|
|
28
|
+
command: 'sudo yum -y install yarn'
|
|
29
|
+
|
|
30
|
+
05_mkdir_webapp_dir:
|
|
31
|
+
command: mkdir /home/webapp
|
|
32
|
+
ignoreErrors: true
|
|
33
|
+
|
|
34
|
+
06_chown_webapp_dir:
|
|
35
|
+
command: chown webapp:webapp /home/webapp
|
|
36
|
+
ignoreErrors: true
|
|
37
|
+
|
|
38
|
+
07_chmod_webapp_dir:
|
|
39
|
+
command: chmod 700 /home/webapp
|
|
40
|
+
ignoreErrors: true
|
|
41
|
+
|
|
42
|
+
```
|
|
43
|
+
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
# Using React Helmet to build `<head>` content
|
|
2
|
+
|
|
3
|
+
## Installation and general usage
|
|
4
|
+
See https://github.com/nfl/react-helmet for details. Run `yarn add react-helmet` in your `client` directory to add this package to your application.
|
|
5
|
+
|
|
6
|
+
## Example
|
|
7
|
+
Here is what you need to do in order to configure your Rails application to work with **ReactHelmet**.
|
|
8
|
+
|
|
9
|
+
Create generator function for server rendering like this:
|
|
10
|
+
|
|
11
|
+
```javascript
|
|
12
|
+
export default (props, _railsContext) => {
|
|
13
|
+
const componentHtml = renderToString(<App {...props} />);
|
|
14
|
+
const helmet = Helmet.renderStatic();
|
|
15
|
+
|
|
16
|
+
const renderedHtml = {
|
|
17
|
+
componentHtml,
|
|
18
|
+
title: helmet.title.toString(),
|
|
19
|
+
};
|
|
20
|
+
return { renderedHtml };
|
|
21
|
+
};
|
|
22
|
+
```
|
|
23
|
+
You can add more **helmet** properties to result, e.g. **meta**, **base** and so on. See https://github.com/nfl/react-helmet#server-usage.
|
|
24
|
+
|
|
25
|
+
Use regular component or generator function for client-side:
|
|
26
|
+
|
|
27
|
+
```javascript
|
|
28
|
+
export default (props, _railsContext) => (
|
|
29
|
+
<App {...props} />
|
|
30
|
+
);
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
Put **ReactHelmet** component somewhere in your `<App>`:
|
|
34
|
+
```javascript
|
|
35
|
+
import { Helmet } from 'react-helmet';
|
|
36
|
+
|
|
37
|
+
const App = (props) => (
|
|
38
|
+
<div>
|
|
39
|
+
<Helmet>
|
|
40
|
+
<title>Custom page title</title>
|
|
41
|
+
</Helmet>
|
|
42
|
+
...
|
|
43
|
+
</div>
|
|
44
|
+
);
|
|
45
|
+
|
|
46
|
+
export default App;
|
|
47
|
+
```
|
|
48
|
+
Register your generators for client and server sides:
|
|
49
|
+
|
|
50
|
+
```javascript
|
|
51
|
+
import ReactHelmetApp from '../ReactHelmetClientApp';
|
|
52
|
+
|
|
53
|
+
ReactOnRails.register({
|
|
54
|
+
ReactHelmetApp
|
|
55
|
+
});
|
|
56
|
+
```
|
|
57
|
+
```javascript
|
|
58
|
+
import ReactHelmetApp from '../ReactHelmetServerApp';
|
|
59
|
+
|
|
60
|
+
ReactOnRails.register({
|
|
61
|
+
ReactHelmetApp
|
|
62
|
+
});
|
|
63
|
+
```
|
|
64
|
+
Now when `react_component` helper will be called with **"ReactHelmetApp"** as a first argument it will return a hash instead of HTML string:
|
|
65
|
+
```ruby
|
|
66
|
+
<% react_helmet_app = react_component("ReactHelmetApp", prerender: true, props: { hello: "world" }, trace: true) %>
|
|
67
|
+
|
|
68
|
+
<% content_for :title do %>
|
|
69
|
+
<%= react_helmet_app['title'] %>
|
|
70
|
+
<% end %>
|
|
71
|
+
|
|
72
|
+
<%= react_helmet_app["componentHtml"] %>
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
So now we're able to insert received title tag to our application layout:
|
|
76
|
+
```ruby
|
|
77
|
+
<%= yield(:title) if content_for?(:title) %>
|
|
78
|
+
```
|
|
@@ -9,7 +9,19 @@ RSpec.configure do |config|
|
|
|
9
9
|
ReactOnRails::TestHelper.configure_rspec_to_compile_assets(config)
|
|
10
10
|
```
|
|
11
11
|
|
|
12
|
-
You can pass
|
|
12
|
+
You can pass one or more RSpec metatags as an optional second parameter to this helper method if you want this helper to run on examples other than where `:js` or `:server_rendering` (those are the defaults). The helper will compile webpack files at most once per test run. The helper will not compile the webpack files unless they are out of date (stale). The helper is configurable in terms of what command is used to prepare the files.
|
|
13
|
+
|
|
14
|
+
If you are using Webpack to build CSS assets, you should do something like this to ensure that you assets are built for any specs under `specs/requests` or `specs/features`:
|
|
15
|
+
|
|
16
|
+
```ruby
|
|
17
|
+
ReactOnRails::TestHelper.configure_rspec_to_compile_assets(config, :requires_webpack_assets)
|
|
18
|
+
|
|
19
|
+
# Because we're using some CSS Webpack files, we need to ensure the webpack files are generated
|
|
20
|
+
# for all feature specs. https://github.com/shakacode/react_on_rails/issues/792
|
|
21
|
+
config.define_derived_metadata(file_path: %r{spec/(features|requests)}) do |metadata|
|
|
22
|
+
metadata[:requires_webpack_assets] = true
|
|
23
|
+
end
|
|
24
|
+
```
|
|
13
25
|
|
|
14
26
|
Please take note of the following:
|
|
15
27
|
- This utility uses your `npm_build_test_command` to build the static generated files. This command **must** not include the `--watch` option. If you have different server and client bundle files, this command **must** create all the bundles.
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
# Turbolinks
|
|
2
2
|
|
|
3
3
|
* See [Turbolinks on Github](https://github.com/rails/turbolinks)
|
|
4
|
-
*
|
|
4
|
+
* React on Rails currently supports 2.5.x of Turbolinks and 5.0.0 of Turbolinks 5.
|
|
5
5
|
* You may include Turbolinks either via yarn (recommended) or via the gem.
|
|
6
6
|
|
|
7
7
|
## Why Turbolinks?
|
|
@@ -40,6 +40,15 @@ Turbolinks 5 is now being supported. React on Rails will automatically detect wh
|
|
|
40
40
|
|
|
41
41
|
For more information on Turbolinks 5: [https://github.com/turbolinks/turbolinks](https://github.com/turbolinks/turbolinks)
|
|
42
42
|
|
|
43
|
+
## Turbolinks from NPM
|
|
44
|
+
|
|
45
|
+
See the [instructions on installing from NPM](https://github.com/turbolinks/turbolinks#installation-using-npm).
|
|
46
|
+
|
|
47
|
+
```js
|
|
48
|
+
import Turbolinks from "turbolinks";
|
|
49
|
+
Turbolinks.start();
|
|
50
|
+
```
|
|
51
|
+
|
|
43
52
|
### async script loading
|
|
44
53
|
Generally async script loading can be done like:
|
|
45
54
|
```erb
|
data/docs/api/javascript-api.md
CHANGED
|
@@ -7,6 +7,14 @@ The best source of docs is the main [ReactOnRails.js](../../node_package/src/Rea
|
|
|
7
7
|
* find you components for rendering. Components get called with props, or you may use a
|
|
8
8
|
* "generator function" to return a React component or an object with the following shape:
|
|
9
9
|
* { renderedHtml, redirectLocation, error }.
|
|
10
|
+
* For server rendering, if you wish to return multiple HTML strings from a generator function,
|
|
11
|
+
* you may return an Object from your generator function with a single top level property of
|
|
12
|
+
* renderedHtml. Inside this Object, place a key called componentHtml, along with any other
|
|
13
|
+
* needed keys. This is useful when you using side effects libraries like react helmet.
|
|
14
|
+
* Your Ruby code with get this Object as a Hash containing keys componentHtml and any other
|
|
15
|
+
* custom keys that you added:
|
|
16
|
+
* { renderedHtml: { componentHtml, customKey1, customKey2 } }
|
|
17
|
+
* See the example in /docs/additional-reading/react-helmet.md
|
|
10
18
|
* @param components (key is component name, value is component)
|
|
11
19
|
*/
|
|
12
20
|
register(components)
|
data/docs/basics/i18n.md
CHANGED
|
@@ -38,7 +38,7 @@ You can refer to [react-webpack-rails-tutorial](https://github.com/shakacode/rea
|
|
|
38
38
|
|
|
39
39
|
4. Javascript locale files must be generated before `yarn build`.
|
|
40
40
|
|
|
41
|
-
Once you setup `config.i18n_dir` as in the previous step, react_on_rails will automatically do this for testing (if using the `ReactOnRails::TestHelper.configure_rspec_to_compile_assets` and for production deployments if using the [default precompile rake hook](../additional-reading/heroku-deployment.md). For development, you should adjust your startup scripts (Procfiles) so that they run
|
|
41
|
+
Once you setup `config.i18n_dir` as in the previous step, react_on_rails will automatically do this for testing (if using the `ReactOnRails::TestHelper.configure_rspec_to_compile_assets` and for production deployments if using the [default precompile rake hook](../additional-reading/heroku-deployment.md). For development, you should adjust your startup scripts (Procfiles) so that they run **`bundle exec rake react_on_rails:locale`** before running any webpack watch process (`yarn run build:development`). You may need to configure your CI to run **`bundle exec rake react_on_rails:locale`** before any webpack process if you are not using the React on Rails test helper. Note, if you are try to lint before running tests, and you are depending on the test helper to build your locales, your linting will fail because the translations won't be built yet. The fix is either to 1) run the rake task to build the translations before running the lint command or 2) to run the tests first.
|
|
42
42
|
|
|
43
43
|
5. In React, you need to initialize `react-intl`, and set parameters for it.
|
|
44
44
|
|
|
@@ -14,25 +14,25 @@
|
|
|
14
14
|
},
|
|
15
15
|
"cacheDirectories": ["node_modules", "client/node_modules"],
|
|
16
16
|
"dependencies": {
|
|
17
|
-
"babel-cli": "^6.
|
|
18
|
-
"babel-core": "^6.
|
|
17
|
+
"babel-cli": "^6.24.1",
|
|
18
|
+
"babel-core": "^6.24.1",
|
|
19
19
|
"babel-loader": "^6.3.2",
|
|
20
20
|
"babel-runtime": "^6.23.0",
|
|
21
21
|
"babel-polyfill": "^6.23.0",
|
|
22
|
-
"babel-preset-es2015": "^6.
|
|
23
|
-
"babel-preset-react": "^6.
|
|
24
|
-
"babel-preset-stage-2": "^6.
|
|
22
|
+
"babel-preset-es2015": "^6.24.1",
|
|
23
|
+
"babel-preset-react": "^6.24.1",
|
|
24
|
+
"babel-preset-stage-2": "^6.24.1",
|
|
25
25
|
"es5-shim": "^4.5.9",
|
|
26
26
|
"expose-loader": "^0.7.3",
|
|
27
27
|
"imports-loader": "^0.7.1",
|
|
28
|
-
"react": "^15.4
|
|
29
|
-
"react-dom": "^15.4
|
|
28
|
+
"react": "^15.5.4",
|
|
29
|
+
"react-dom": "^15.5.4",
|
|
30
30
|
"react-on-rails": "<%= VersionSyntaxConverter.new.rubygem_to_npm %>",
|
|
31
31
|
<%- if options.redux? -%>
|
|
32
|
-
"react-redux": "^5.0.
|
|
32
|
+
"react-redux": "^5.0.4",
|
|
33
33
|
"redux": "^3.6.0",
|
|
34
34
|
<%- end -%>
|
|
35
|
-
"webpack": "^2.3.
|
|
35
|
+
"webpack": "^2.3.3"
|
|
36
36
|
},
|
|
37
37
|
"devDependencies": {
|
|
38
38
|
}
|