react_on_rails 12.0.0.pre.beta.3 → 12.0.3.beta.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/.github/workflows/lint-js-and-ruby.yml +53 -0
- data/.github/workflows/main.yml +178 -0
- data/.github/workflows/package-js-tests.yml +35 -0
- data/.github/workflows/rspec-package-specs.yml +45 -0
- data/.rubocop.yml +1 -0
- data/.travis.yml +8 -4
- data/CHANGELOG.md +37 -20
- data/CONTRIBUTING.md +1 -1
- data/NEWS.md +5 -0
- data/README.md +65 -62
- data/SUMMARY.md +1 -1
- data/docs/additional-reading/converting-from-custom-webpack-config-to-rails-webpacker-config.md +10 -0
- data/docs/additional-reading/react-router.md +1 -1
- data/docs/additional-reading/recommended-project-structure.md +69 -0
- data/docs/additional-reading/server-rendering-tips.md +4 -1
- data/docs/api/javascript-api.md +3 -3
- data/docs/api/redux-store-api.md +2 -2
- data/docs/api/view-helpers-api.md +4 -4
- data/docs/basics/client-vs-server-rendering.md +2 -0
- data/docs/basics/configuration.md +1 -1
- data/docs/basics/hmr-and-hot-reloading-with-the-webpack-dev-server.md +64 -9
- data/docs/basics/react-server-rendering.md +8 -5
- data/docs/basics/render-functions-and-railscontext.md +1 -1
- data/docs/basics/upgrading-react-on-rails.md +29 -12
- data/docs/basics/webpack-configuration.md +12 -18
- data/docs/misc/doctrine.md +0 -1
- data/docs/outdated/code-splitting.md +3 -3
- data/docs/tutorial.md +6 -0
- data/lib/generators/react_on_rails/templates/dev_tests/spec/rails_helper.rb +4 -1
- data/lib/react_on_rails/helper.rb +8 -8
- data/lib/react_on_rails/utils.rb +5 -1
- data/lib/react_on_rails/version.rb +1 -1
- data/lib/react_on_rails/webpacker_utils.rb +4 -4
- data/lib/tasks/assets.rake +21 -4
- data/package.json +1 -1
- data/rakelib/examples.rake +1 -1
- data/rakelib/lint.rake +1 -1
- data/rakelib/release.rake +1 -3
- metadata +8 -3
- data/docs/basics/recommended-project-structure.md +0 -77
@@ -8,22 +8,18 @@ The webpack-dev-server provides:
|
|
8
8
|
abruptly lose any tweaks within the Chrome development tools.
|
9
9
|
3. Optional hot-reloading. The older react-hot-loader has been deprecated in
|
10
10
|
favor of [fast-refresh](https://reactnative.dev/docs/fast-refresh).
|
11
|
-
For use with webpack, see [react-refresh-webpack-plugin](https://github.com/pmmmwh/react-refresh-webpack-plugin).
|
11
|
+
For use with webpack, see **Client Side rendering and HMR using react-refresh-webpack-plugin** section bellow or visit [react-refresh-webpack-plugin](https://github.com/pmmmwh/react-refresh-webpack-plugin) for additional details.
|
12
12
|
|
13
13
|
If you are ***not*** using server-side rendering (***not*** using `prerender: true`),
|
14
14
|
then you can follow all the regular docs for using the `bin/webpack-dev-server`
|
15
15
|
during development.
|
16
16
|
|
17
|
-
|
18
17
|
# Server Side Rendering with the Default rails/webpacker bin/webpack-dev-server
|
19
18
|
|
20
19
|
If you are using server-side rendering, then you have a couple options. The
|
21
20
|
recommended technique is to have a different webpack configuration for server
|
22
21
|
rendering.
|
23
22
|
|
24
|
-
|
25
|
-
|
26
|
-
|
27
23
|
## If you use the same Webpack setup for your server and client bundles
|
28
24
|
If you do use the webpack-dev-server for prerendering, be sure to set the
|
29
25
|
`config/initializers/react_on_rails.rb` setting of
|
@@ -43,7 +39,66 @@ If you don't configure these two to false, you'll see errors like:
|
|
43
39
|
* "ReferenceError: window is not defined" (if hmr is true)
|
44
40
|
* "TypeError: Cannot read property 'prototype' of undefined" (if inline is true)
|
45
41
|
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
42
|
+
# Client Side rendering with HMR using react-refresh-webpack-plugin
|
43
|
+
## Basic installation
|
44
|
+
To enable HMR functionality you have to use `./bin/webpack-dev-server`
|
45
|
+
1. In `config/webpacker.yml` set **hmr** and **inline** `dev_server` properties to true.
|
46
|
+
```
|
47
|
+
dev_server:
|
48
|
+
https: false
|
49
|
+
host: localhost
|
50
|
+
port: 3035
|
51
|
+
public: localhost:3035
|
52
|
+
hmr: true
|
53
|
+
# Inline should be set to true if using HMR
|
54
|
+
inline: true
|
55
|
+
```
|
56
|
+
|
57
|
+
2. Add react refresh packages:
|
58
|
+
` yarn add @pmmmwh/react-refresh-webpack-plugin react-refresh -D`
|
59
|
+
|
60
|
+
3. HMR is for use with the webpack-dev-server, so we only add this for the webpack-dev-server.
|
61
|
+
```
|
62
|
+
const { devServer } = require('@rails/webpacker')
|
63
|
+
|
64
|
+
const isWebpackDevServer = process.env.WEBPACK_DEV_SERVER
|
65
|
+
|
66
|
+
//plugins
|
67
|
+
if (isWebpackDevServer) {
|
68
|
+
environment.plugins.append(
|
69
|
+
'ReactRefreshWebpackPlugin',
|
70
|
+
new ReactRefreshWebpackPlugin({
|
71
|
+
overlay: {
|
72
|
+
sockPort: devServer.port
|
73
|
+
}
|
74
|
+
})
|
75
|
+
)
|
76
|
+
}
|
77
|
+
```
|
78
|
+
We added overlay.sockedPort option in `ReactRefreshWebpackPlugin` to match the webpack dev-server port specified in config/webpacker.yml. Thats way we make sockjs works properly and suppress error in browser console `GET http://localhost:[port]/sockjs-node/info?t=[xxxxxxxxxx] 404 (Not Found)`.
|
79
|
+
|
80
|
+
4. Add react-refresh plugin in `babel.config.js`
|
81
|
+
```
|
82
|
+
module.export = function(api) {
|
83
|
+
return {
|
84
|
+
plugins: [process.env.WEBPACK_DEV_SERVER && 'react-refresh/babel'].filter(Boolean)
|
85
|
+
}
|
86
|
+
}
|
87
|
+
```
|
88
|
+
That's it :).
|
89
|
+
Now Browser should reflect .js along with .css changes without reloading.
|
90
|
+
|
91
|
+
If by some reason plugin doesn't work you could revert changes and left only devServer hmr/inline to true affecting only css files.
|
92
|
+
|
93
|
+
These plugins are working and tested with
|
94
|
+
- babel 7
|
95
|
+
- webpacker 5
|
96
|
+
- bootstrap 4
|
97
|
+
- jest 26
|
98
|
+
- core-js 3
|
99
|
+
- node 12.10.0
|
100
|
+
- react-refresh-webpack-plugin@0.4.1
|
101
|
+
- react-refresh 0.8.3
|
102
|
+
- react_on_rails 11.1.4
|
103
|
+
|
104
|
+
configuration.
|
@@ -1,6 +1,9 @@
|
|
1
1
|
# React Server Rendering
|
2
2
|
|
3
|
-
See also [Client vs. Server Rendering](./client-vs-server-rendering.md)
|
3
|
+
See also [Client vs. Server Rendering](./client-vs-server-rendering.md).
|
4
|
+
|
5
|
+
## What is the easiest way to setup a webpack configuration for server-side-rendering?
|
6
|
+
See the example webpack setup here: [github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh](https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh).
|
4
7
|
|
5
8
|
## What is Server Rendering?
|
6
9
|
|
@@ -10,13 +13,13 @@ During the Rails rendering of HTML per a browser request, the Rails server will
|
|
10
13
|
|
11
14
|
The default JavaScript interpretter is [ExecJS](https://github.com/rails/execjs). If you want to maximize the perfomance of your server rendering, then you want to use React on Rails Pro which uses NodeJS to do the server rendering. See the [docs for React on Rails Pro](https://github.com/shakacode/react_on_rails/wiki).
|
12
15
|
|
13
|
-
See [this note](docs/outdated/how-react-on-rails-works.md#client-side-rendering-vs-server-side-rendering)
|
14
|
-
|
16
|
+
See [this note](docs/outdated/how-react-on-rails-works.md#client-side-rendering-vs-server-side-rendering).
|
15
17
|
|
16
18
|
## How do you do Server Rendering with React on Rails?
|
17
19
|
1. The `react_component` view helper method provides the `prerender:` option to switch on or off server rendering.
|
18
20
|
1. Configure your Webpack setup to create a different server bundle per your needs. While you may reuse the same bundle as for client rendering, this is not common in larger apps for many reasons, such as as code splitting, handling CSS and images, different code paths for React Router on the server vs. client, etc.
|
19
|
-
1. You need to configure `config.server_bundle_js_file = "
|
21
|
+
1. You need to configure `config.server_bundle_js_file = "server-bundle.js"` in your `config/initializers/react_on_rails.rb`
|
22
|
+
1. You should ***not*** put a hash on the server-bundle so that you can easily use the webpack-dev-server for client bundles and have the server bundle generated by a watch process.
|
20
23
|
|
21
24
|
## Do you need server rendering?
|
22
25
|
|
@@ -26,4 +29,4 @@ Server rendering is used for either SEO or performance reasons.
|
|
26
29
|
|
27
30
|
1. Never access `window`. Animations, globals on window, etc. just don't make sense when you're trying to run some JavaScript code to output a string of HTML.
|
28
31
|
2. JavaScript calls to `setTimeout`, `setInterval`, and `clearInterval` similarly don't make sense when server rendering.
|
29
|
-
3. Promises don't work when server rendering
|
32
|
+
3. Promises and file system access don't work when server rendering with ExecJS. Instead, you can use the Node renderer or [React on Rails Pro](https://www.shakacode.com/react-on-rails-pro/).
|
@@ -15,7 +15,7 @@ side rendering, except for the key `serverSide` based on whether or not you are
|
|
15
15
|
|
16
16
|
While you could manually configure your Rails code to pass the "`railsContext` information" with
|
17
17
|
the rest of your "props", the `railsContext` is a convenience because it's passed consistently to
|
18
|
-
all invocations of
|
18
|
+
all invocations of Render-Functions.
|
19
19
|
|
20
20
|
For example, suppose you create a "render-function" called MyAppComponent.
|
21
21
|
|
@@ -8,9 +8,13 @@ We specialize in helping companies to quickly and efficiently move from versions
|
|
8
8
|
## Upgrading to v12
|
9
9
|
### Recent versions
|
10
10
|
Make sure that you are on a relatively more recent version of rails and webpacker.
|
11
|
-
v12 is tested on Rails 6. It should work on Rails v5. If you're on
|
11
|
+
v12 is tested on Rails 6. It should work on Rails v5. If you're on any older version,
|
12
12
|
and v12 doesn't work, please file an issue.
|
13
13
|
|
14
|
+
### Removed Configuration config.symlink_non_digested_assets_regex
|
15
|
+
Remove `config.symlink_non_digested_assets_regex` from your `config/initializers/react_on_rails.rb`.
|
16
|
+
If you still need that feature, please file an issue.
|
17
|
+
|
14
18
|
### i18n default format changed to JSON
|
15
19
|
* If you're using the internalization helper, then set `config.i18n_output_format = 'js'`. You can
|
16
20
|
later update to the default JSON format as you will need to update your usage of that file. A JSON
|
@@ -19,25 +23,38 @@ and v12 doesn't work, please file an issue.
|
|
19
23
|
### Updated API for `ReactOnRails.register()`
|
20
24
|
|
21
25
|
In order to solve the issues regarding React Hooks compatibility, the number of parameters
|
22
|
-
for functions is used to determine if you have a
|
26
|
+
for functions is used to determine if you have a Render-Function that will get invoked to
|
23
27
|
return a React component, or you are registering a React component defined by a function.
|
28
|
+
Please see [Render-Functions and the Rails Context](./render-functions-and-railscontext.md) for
|
29
|
+
more information on what a Render-Function is.
|
24
30
|
|
25
|
-
#####
|
26
|
-
|
27
|
-
Registered Objects are of the following types. Either of these will work:
|
28
|
-
1. Take **2 params** and return **a React function or class component**. A function component is a function
|
29
|
-
that takes zero or one params and returns a React Element, like JSX.
|
30
|
-
```js
|
31
|
-
export default (props, _railsContext) => () => <Component {...props} />;
|
32
|
-
```
|
31
|
+
##### Update required for registered functions taking exactly 2 params.
|
33
32
|
|
34
|
-
|
33
|
+
Registered Objects are of the following type:
|
34
|
+
1. **Function that takes only zero or one params and you return a React Element**, often JSX. If the function takes zero or one params, there is **no migration needed** for that function.
|
35
35
|
```js
|
36
36
|
export default (props) => <Component {...props} />;
|
37
|
+
```
|
38
|
+
2. Function that takes **2 params** and returns **a React function or class component**. _Migration is needed as the older syntax returned a React Element._
|
39
|
+
A function component is a function that takes zero or one params and returns a React Element, like JSX. The correct syntax
|
40
|
+
looks like:
|
41
|
+
```js
|
42
|
+
export default (props, railsContext) => () => <Component {{...props, railsContext}} />;
|
37
43
|
```
|
44
|
+
Note, you cannot return a React Element (JSX). See below for the migration steps. If your function that took **two params returned
|
45
|
+
an Object**, then no migration is required.
|
46
|
+
3. Function that takes **3 params** and uses the 3rd param, `domNodeId`, to call `ReactDOM.hydrate`. If the function takes 3 params, there is **no migration needed** for that function.
|
47
|
+
4. ES6 or ES5 class. There is **no migration needed**.
|
48
|
+
|
49
|
+
Previously, with case number 2, you could return a React Element.
|
50
|
+
|
51
|
+
The fix is simple. Here is an example of the change you'll do:
|
52
|
+
|
53
|
+
![2020-07-07_09-43-51 (1)](https://user-images.githubusercontent.com/1118459/86927351-eff79e80-c0ce-11ea-9172-d6855c45e2bb.png)
|
54
|
+
|
38
55
|
##### Broken, as this function takes two params and it returns a React Element from a JSX Literal
|
39
56
|
```js
|
40
|
-
export default (props,
|
57
|
+
export default (props, railsContext) => <Component {{...props, railsContext} />;
|
41
58
|
```
|
42
59
|
|
43
60
|
If you make this mistake, you'll get this warning
|
@@ -6,8 +6,13 @@
|
|
6
6
|
|
7
7
|
[rails/webpacker](https://github.com/rails/webpacker) is the Ruby gem that mainly gives us 2 things:
|
8
8
|
|
9
|
-
1. View helpers for placing the
|
10
|
-
2. A layer of abstraction on top of Webpack customization.
|
9
|
+
1. View helpers for placing the webpack bundles on your Rails views. React on Rails depends on these view helpers.
|
10
|
+
2. A layer of abstraction on top of Webpack customization. The base setup works great for the client side webpack configuration.
|
11
|
+
|
12
|
+
To get a deeper understanding of `rails/webpacker`, watch [RailsConf 2020 CE - Webpacker, It-Just-Works, But How? by Justin Gordon](https://youtu.be/sJLoOpc5LD8)
|
13
|
+
|
14
|
+
Per the example repo [shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh](https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh),
|
15
|
+
you should consider keeping your codebase mostly consistent with the defaults for [rails/webpacker](https://github.com/rails/webpacker).
|
11
16
|
|
12
17
|
# React on Rails
|
13
18
|
|
@@ -15,15 +20,15 @@ Version 9 of React on Rails added support for the rails/webpacker view helpers s
|
|
15
20
|
|
16
21
|
A key decision in your use React on Rails is whether you go with the rails/webpacker default setup or the traditional React on Rails setup of putting all your client side files under the `/client` directory. While there are technically 2 independent choices involved, the directory structure and the mechanism of Webpack configuration, for simplicity sake we'll assume that these choices go together.
|
17
22
|
|
18
|
-
## Option 1:
|
23
|
+
## Option 1: Default Generator Setup: rails/webpacker app/javascript
|
19
24
|
|
20
|
-
|
25
|
+
Typical rails/webpacker apps have a standard directory structure as documented [here](https://github.com/rails/webpacker/blob/master/docs/folder-structure.md). If you follow the steps in the the [basic tutorial](../../docs/tutorial.md), you will see this pattern in action. In order to customize the Webpack configuration, you need to consult with the [rails/webpacker Webpack configuration](https://github.com/rails/webpacker/blob/master/docs/webpack.md).
|
21
26
|
|
22
|
-
The
|
27
|
+
The *advantage* of using rails/webpacker to configure Webpack is that there is very little code needed to get started and you don't need to understand really anything about Webpack customization.
|
23
28
|
|
24
|
-
|
29
|
+
## Option 2: Traditional React on Rails using the /client directory
|
25
30
|
|
26
|
-
|
31
|
+
Until version 9, all React on Rails apps used the `/client` directory for configuring React on Rails in terms of the configuration of Webpack and location of your JavaScript and Webpack files, including the node_modules directory. Version 9 changed the default to `/` for the `node_modules` location using this value in `config/initializers/react_on_rails.rb`: `config.node_modules_location`.
|
27
32
|
|
28
33
|
You can access values in the `config/webpacker.yml`
|
29
34
|
|
@@ -36,15 +41,4 @@ You will want consider using some of the same values set in these files:
|
|
36
41
|
* https://github.com/rails/webpacker/blob/master/package/environments/base.js
|
37
42
|
* https://github.com/rails/webpacker/blob/master/package/environments/development.js
|
38
43
|
|
39
|
-
**Note**, if your node_modules directory is not at the top level of the Rails project, then you will need to set the
|
40
|
-
ENV value of WEBPACKER_CONFIG to the location of the `config/webpacker.yml` file per [rails/webpacker PR 2561](https://github.com/rails/webpacker/pull/2561).
|
41
|
-
|
42
|
-
## Option 2: Default Generator Setup: rails/webpacker app/javascript
|
43
|
-
|
44
|
-
Typical rails/webpacker apps have a standard directory structure as documented [here](https://github.com/rails/webpacker/blob/master/docs/folder-structure.md). If you follow the steps in the the [basic tutorial](../../docs/tutorial.md), you will see this pattern in action. In order to customize the Webpack configuration, you need to consult with the [rails/webpacker Webpack configuration](https://github.com/rails/webpacker/blob/master/docs/webpack.md).
|
45
|
-
|
46
|
-
The *advantage* of using rails/webpacker to configure Webpack is that there is very little code needed to get started and you don't need to understand really anything about Webpack customization. The *big disadvantage* to this is that you will need to learn the ins and outs of the [rails/webpacker way to customize Webpack](https://github.com/rails/webpacker/blob/master/docs/webpack.md) which differs from the plain [Webpack way](https://webpack.js.org/).
|
47
44
|
|
48
|
-
You can find more details on this topic in [Recommended Project Structure](./recommended-project-structure.md).
|
49
|
-
|
50
|
-
See [Issue 982: Tutorial Generating Correct Project Structure?](https://github.com/shakacode/react_on_rails/issues/982) to discuss this issue.
|
data/docs/misc/doctrine.md
CHANGED
@@ -25,7 +25,6 @@ The React on Rails setup provides several key components related to front-end de
|
|
25
25
|
* React on Rails has taken the hard work out of figuring out the JavaScript tooling that works best with Rails. Not only could you spend lots of time researching different tooling, but then you'd have to figure out how to splice it all together. This is where a lot of "JavaScript fatigue" comes from. The following keep the code clean and consistent:
|
26
26
|
* [Style Guide](../coding-style/style.md)
|
27
27
|
* [linters](../contributor-info/linters.md)
|
28
|
-
* [Recommended Project Structure](../basics/recommended-project-structure.md)
|
29
28
|
|
30
29
|
We're big believers in this quote from the Rails Doctrine:
|
31
30
|
|
@@ -21,11 +21,11 @@ Let's say you're requesting a page that needs to fetch a code chunk from the ser
|
|
21
21
|
> (server) <div data-reactroot="
|
22
22
|
<!--This comment is here because the comment beginning on line 13 messes up Sublime's markdown parsing-->
|
23
23
|
|
24
|
-
Different markup is generated on the client than on the server. Why does this happen? When you register a component or
|
24
|
+
Different markup is generated on the client than on the server. Why does this happen? When you register a component or Render-Function with `ReactOnRails.register`, react on rails will render the component as soon as the page loads. However, react-router renders a comment while waiting for the code chunk to be fetched from the server. This means that react will tear all of the server rendered code out of the DOM, and then rerender it a moment later once the code chunk arrives from the server, defeating most of the purpose of server rendering.
|
25
25
|
|
26
26
|
### The solution
|
27
27
|
|
28
|
-
To prevent this, you have to wait until the code chunk is fetched before doing the initial render on the client side. To accomplish this, react on rails allows you to register a renderer. This works just like registering a
|
28
|
+
To prevent this, you have to wait until the code chunk is fetched before doing the initial render on the client side. To accomplish this, react on rails allows you to register a renderer. This works just like registering a Render-Function, except that the function you pass takes three arguments: `renderer(props, railsContext, domNodeId)`, and is responsible for calling `ReactDOM.render` or `ReactDOM.hydrate` to render the component to the DOM. React on rails will automatically detect when a Render-Function takes three arguments, and will **not** call `ReactDOM.render` or `ReactDOM.hydrate`, instead allowing you to control the initial render yourself. Note, you have to be careful to call `ReactDOM.hydrate` rather than `ReactDOM.render` if you are are server rendering.
|
29
29
|
|
30
30
|
Here's an example of how you might use this in practice:
|
31
31
|
|
@@ -134,7 +134,7 @@ If you're going to try to do code splitting with server rendered routes, you'll
|
|
134
134
|
|
135
135
|
The reason is we do server rendering with ExecJS, which is not capable of doing anything asynchronous. It would be impossible to asyncronously fetch a code chunk while server rendering. See [this issue](https://github.com/shakacode/react_on_rails/issues/477) for a discussion.
|
136
136
|
|
137
|
-
Also, do not attempt to register a renderer on the server. Instead, register either a
|
137
|
+
Also, do not attempt to register a renderer function on the server. Instead, register either a Render-Function or a component. If you register a renderer in the server bundle, you'll get an error when react on rails tries to server render the component.
|
138
138
|
|
139
139
|
## How does Webpack know where to find my code chunks?
|
140
140
|
|
data/docs/tutorial.md
CHANGED
@@ -1,5 +1,11 @@
|
|
1
1
|
# React on Rails Basic Tutorial
|
2
2
|
|
3
|
+
-----
|
4
|
+
|
5
|
+
**August 2, 2020**: See the example repo of [React on Rails Tutorial With SSR, HMR fast refresh, and TypeScript](https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh) for a new way to setup the creation of your SSR bundle with `rails/webpacker`. This file will be update shortly. Most of it is still relevant.
|
6
|
+
|
7
|
+
-----
|
8
|
+
|
3
9
|
*Updated for Ruby 2.7.1, Rails 6.0.3.1, and React on Rails v12.0.0*
|
4
10
|
|
5
11
|
This tutorial guides you through setting up a new or existing Rails app with **React on Rails**, demonstrating Rails + React + Redux + Server Rendering.
|
@@ -15,7 +15,10 @@ require "capybara/rspec"
|
|
15
15
|
require "capybara/rails"
|
16
16
|
Capybara.javascript_driver = :selenium_chrome
|
17
17
|
Capybara.register_driver :selenium_chrome do |app|
|
18
|
-
|
18
|
+
options = Selenium::WebDriver::Chrome::Options.new
|
19
|
+
options.add_argument("--headless")
|
20
|
+
options.add_argument("--disable-gpu")
|
21
|
+
Capybara::Selenium::Driver.new(app, browser: :chrome, options: options)
|
19
22
|
end
|
20
23
|
|
21
24
|
# Requires supporting ruby files with custom matchers and macros, etc, in
|
@@ -17,13 +17,13 @@ module ReactOnRails
|
|
17
17
|
|
18
18
|
COMPONENT_HTML_KEY = "componentHtml"
|
19
19
|
|
20
|
-
# react_component_name: can be a React function or class component or a "
|
21
|
-
# "
|
20
|
+
# react_component_name: can be a React function or class component or a "Render-Function".
|
21
|
+
# "Render-Functions" differ from a React function in that they take two parameters, the
|
22
22
|
# props and the railsContext, like this:
|
23
23
|
#
|
24
24
|
# let MyReactComponentApp = (props, railsContext) => <MyReactComponent {...props}/>;
|
25
25
|
#
|
26
|
-
# Alternately, you can define the
|
26
|
+
# Alternately, you can define the Render-Function with an additional property
|
27
27
|
# `.renderFunction = true`:
|
28
28
|
#
|
29
29
|
# let MyReactComponentApp = (props) => <MyReactComponent {...props}/>;
|
@@ -79,7 +79,7 @@ module ReactOnRails
|
|
79
79
|
Value:
|
80
80
|
#{server_rendered_html}
|
81
81
|
|
82
|
-
If you're trying to use a
|
82
|
+
If you're trying to use a Render-Function to return a Hash to your ruby view code, then use
|
83
83
|
react_component_hash instead of react_component and see
|
84
84
|
https://github.com/shakacode/react_on_rails/blob/master/spec/dummy/client/app/startup/ReactHelmetServerApp.jsx
|
85
85
|
for an example of the JavaScript code.
|
@@ -93,7 +93,7 @@ module ReactOnRails
|
|
93
93
|
# It is exactly like react_component except for the following:
|
94
94
|
# 1. prerender: true is automatically added, as this method doesn't make sense for client only
|
95
95
|
# rendering.
|
96
|
-
# 2. Your JavaScript
|
96
|
+
# 2. Your JavaScript Render-Function for server rendering must return an Object rather than a React component.
|
97
97
|
# 3. Your view code must expect an object and not a string.
|
98
98
|
#
|
99
99
|
# Here is an example of the view code:
|
@@ -124,10 +124,10 @@ module ReactOnRails
|
|
124
124
|
)
|
125
125
|
else
|
126
126
|
msg = <<~MSG
|
127
|
-
|
127
|
+
Render-Function used by react_component_hash for #{component_name} is expected to return
|
128
128
|
an Object. See https://github.com/shakacode/react_on_rails/blob/master/spec/dummy/client/app/startup/ReactHelmetServerApp.jsx
|
129
129
|
for an example of the JavaScript code.
|
130
|
-
Note, your
|
130
|
+
Note, your Render-Function must either take 2 params or have the property
|
131
131
|
`.renderFunction = true` added to it to distinguish it from a React Function Component.
|
132
132
|
MSG
|
133
133
|
raise ReactOnRails::Error, msg
|
@@ -240,7 +240,7 @@ module ReactOnRails
|
|
240
240
|
end
|
241
241
|
|
242
242
|
# This is the definitive list of the default values used for the rails_context, which is the
|
243
|
-
# second parameter passed to both component and store
|
243
|
+
# second parameter passed to both component and store Render-Functions.
|
244
244
|
# This method can be called from views and from the controller, as `helpers.rails_context`
|
245
245
|
#
|
246
246
|
# rubocop:disable Metrics/AbcSize
|
data/lib/react_on_rails/utils.rb
CHANGED
@@ -71,7 +71,11 @@ module ReactOnRails
|
|
71
71
|
# 1. Using same bundle for both server and client, so server bundle will be hashed in manifest
|
72
72
|
# 2. Using a different bundle (different Webpack config), so file is not hashed, and
|
73
73
|
# bundle_js_path will throw so the default path is used without a hash.
|
74
|
-
# 3.
|
74
|
+
# 3. The third option of having the server bundle hashed and a different configuration than
|
75
|
+
# the client bundle is not supported for 2 reasons:
|
76
|
+
# a. The webpack manifest plugin would have a race condition where the same manifest.json
|
77
|
+
# is edited by both the webpack-dev-server
|
78
|
+
# b. There is no good reason to hash the server bundle name.
|
75
79
|
return @server_bundle_path if @server_bundle_path && !Rails.env.development?
|
76
80
|
|
77
81
|
bundle_name = ReactOnRails.configuration.server_bundle_js_file
|
@@ -28,10 +28,10 @@ module ReactOnRails
|
|
28
28
|
# Next line will throw if the file or manifest does not exist
|
29
29
|
hashed_bundle_name = Webpacker.manifest.lookup!(bundle_name)
|
30
30
|
|
31
|
-
#
|
32
|
-
#
|
33
|
-
#
|
34
|
-
# would mean that the bundle is created by
|
31
|
+
# Support for hashing the server-bundle and having that built
|
32
|
+
# the webpack-dev-server is provided by the config value
|
33
|
+
# "same_bundle_for_client_and_server" where a value of true
|
34
|
+
# would mean that the bundle is created by the webpack-dev-server
|
35
35
|
is_server_bundle = bundle_name == ReactOnRails.configuration.server_bundle_js_file
|
36
36
|
|
37
37
|
if Webpacker.dev_server.running? && (!is_server_bundle ||
|
data/lib/tasks/assets.rake
CHANGED
@@ -9,18 +9,34 @@ ENV["RAILS_ENV"] ||= ENV["RACK_ENV"] || "development"
|
|
9
9
|
ENV["NODE_ENV"] ||= "development"
|
10
10
|
|
11
11
|
unless ReactOnRails::WebpackerUtils.webpacker_webpack_production_config_exists?
|
12
|
+
# Ensure that rails/webpacker does not call bin/webpack if we're providing
|
13
|
+
# the build command.
|
14
|
+
ENV["WEBPACKER_PRECOMPILE"] = "false"
|
15
|
+
|
16
|
+
precompile_tasks = lambda {
|
17
|
+
Rake::Task["react_on_rails:assets:webpack"].invoke
|
18
|
+
puts "Invoking task webpacker:clean from React on Rails"
|
19
|
+
|
20
|
+
# VERSIONS is per the rails/webpacker clean method definition.
|
21
|
+
# We set it very big so that it is not used, and then clean just
|
22
|
+
# removes files older than 1 hour.
|
23
|
+
VERSIONS = 100_000
|
24
|
+
Rake::Task["webpacker:clean"].invoke(VERSIONS)
|
25
|
+
}
|
26
|
+
|
12
27
|
if Rake::Task.task_defined?("assets:precompile")
|
13
28
|
Rake::Task["assets:precompile"].enhance do
|
14
|
-
|
15
|
-
puts "Invoking task wepacker:clean from React on Rails"
|
16
|
-
Rake::Task["webpacker:clean"].invoke
|
29
|
+
precompile_tasks.call
|
17
30
|
end
|
18
31
|
else
|
19
|
-
Rake::Task.define_task("assets:precompile"
|
32
|
+
Rake::Task.define_task("assets:precompile") do
|
33
|
+
precompile_tasks.call
|
34
|
+
end
|
20
35
|
end
|
21
36
|
end
|
22
37
|
|
23
38
|
# Sprockets independent tasks
|
39
|
+
# rubocop:disable Metrics/BlockLength
|
24
40
|
namespace :react_on_rails do
|
25
41
|
namespace :assets do
|
26
42
|
desc <<-DESC.strip_heredoc
|
@@ -50,3 +66,4 @@ namespace :react_on_rails do
|
|
50
66
|
end
|
51
67
|
end
|
52
68
|
end
|
69
|
+
# rubocop:enable Metrics/BlockLength
|