react_on_rails 12.0.0.pre.beta.2 → 12.0.2

Sign up to get free protection for your applications and to get access to all the features.
Files changed (49) hide show
  1. checksums.yaml +4 -4
  2. data/.rubocop.yml +1 -0
  3. data/.travis.yml +8 -4
  4. data/CHANGELOG.md +28 -19
  5. data/NEWS.md +5 -0
  6. data/README.md +79 -80
  7. data/SUMMARY.md +2 -2
  8. data/docs/additional-reading/converting-from-custom-webpack-config-to-rails-webpacker-config.md +10 -0
  9. data/docs/additional-reading/react-router.md +1 -1
  10. data/docs/additional-reading/recommended-project-structure.md +69 -0
  11. data/docs/additional-reading/server-rendering-tips.md +4 -1
  12. data/docs/api/javascript-api.md +3 -3
  13. data/docs/api/redux-store-api.md +2 -2
  14. data/docs/api/view-helpers-api.md +4 -4
  15. data/docs/basics/client-vs-server-rendering.md +2 -0
  16. data/docs/basics/configuration.md +21 -16
  17. data/docs/basics/deployment.md +2 -3
  18. data/docs/basics/heroku-deployment.md +24 -0
  19. data/docs/basics/hmr-and-hot-reloading-with-the-webpack-dev-server.md +62 -9
  20. data/docs/basics/i18n.md +3 -3
  21. data/docs/basics/installation-into-an-existing-rails-app.md +2 -7
  22. data/docs/basics/react-server-rendering.md +8 -5
  23. data/docs/basics/render-functions-and-railscontext.md +1 -1
  24. data/docs/basics/rspec-configuration.md +3 -4
  25. data/docs/basics/upgrading-react-on-rails.md +37 -18
  26. data/docs/basics/webpack-configuration.md +12 -22
  27. data/docs/misc/doctrine.md +1 -2
  28. data/docs/outdated/code-splitting.md +3 -3
  29. data/docs/outdated/how-react-on-rails-works.md +8 -4
  30. data/docs/outdated/manual-installation-overview.md +1 -1
  31. data/docs/outdated/rails-assets.md +0 -7
  32. data/docs/tutorial.md +6 -0
  33. data/lib/generators/react_on_rails/templates/base/base/config/initializers/react_on_rails.rb +2 -0
  34. data/lib/react_on_rails/configuration.rb +45 -6
  35. data/lib/react_on_rails/helper.rb +8 -8
  36. data/lib/react_on_rails/test_helper/webpack_assets_compiler.rb +17 -0
  37. data/lib/react_on_rails/utils.rb +5 -1
  38. data/lib/react_on_rails/version.rb +1 -1
  39. data/lib/react_on_rails/webpacker_utils.rb +10 -4
  40. data/lib/tasks/assets.rake +38 -14
  41. data/package.json +1 -1
  42. data/rakelib/examples.rake +1 -1
  43. data/rakelib/lint.rake +1 -1
  44. data/rakelib/release.rake +1 -3
  45. data/react_on_rails.gemspec +1 -0
  46. data/yarn.lock +260 -109
  47. metadata +21 -6
  48. data/docs/basics/recommended-project-structure.md +0 -94
  49. data/docs/outdated/heroku-deployment.md +0 -86
@@ -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 render functions.
18
+ all invocations of Render-Functions.
19
19
 
20
20
  For example, suppose you create a "render-function" called MyAppComponent.
21
21
 
@@ -12,8 +12,7 @@ compiled by webpack before running tests and during production deployment:
12
12
  2. **Use the react_on_rails settings and helpers**. Use the settings in `config/initializers/react_on_rails.rb`. Refer to [docs/configuration](./configuration.md).
13
13
 
14
14
  ```yml
15
- config.build_production_command = "RAILS_ENV=production bin/webpack"
16
- config.build_test_command = "RAILS_ENV=test bin/webpack"
15
+ config.build_test_command = "NODE_ENV=test RAILS_ENV=test bin/webpack"
17
16
  ```
18
17
 
19
18
  Which should you use? If you're already using the `rails/webpacker` way to configure webpack, then
@@ -45,11 +44,11 @@ If you are using Webpack to build CSS assets, you should do something like this
45
44
  ```
46
45
 
47
46
  Please take note of the following:
48
- - If you are using Webpacker, be **SURE** to configure the `source_path` in your `config/webpacker.yml` unless you are using the defaults for webpacker. If you are not using webpacker, all files in the node_modules_location are used for your test sources.
47
+ - If you are using Webpacker, be **SURE** to configure the `source_path` in your `config/webpacker.yml` unless you are using the defaults for webpacker.
49
48
 
50
49
  - This utility uses your `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. If you are using webpacker, the default value will come from the `config/webpacker.yml` value for the `public_output_path` and the `source_path`
51
50
 
52
- - If you add an older file to your source files, that is already older than the produced output files, no new recompilation is done. The solution to this issue is to clear out your directory of webpack generated files when adding new source files that may have older dates. This can happen when you've built your test generated files and then you sync up your repository files.
51
+ - If you add an older file to your source files, that is already older than the produced output files, no new recompilation is done. The solution to this issue is to clear out your directory of webpack generated files when adding new source files that may have older dates.
53
52
 
54
53
  - By default, the webpack processes look in the webpack generated files folder, configured via the `config/webpacker.yml` config values of `public_root_path` and `public_output_path`. If the webpack generated files folder is missing, is empty, or contains files in the `config.webpack_generated_files` list with `mtime`s older than any of the files in your `client` folder, the helper will recompile your assets.
55
54
 
@@ -6,36 +6,55 @@ If you would like help in migrating between React on Rails versions or help with
6
6
  We specialize in helping companies to quickly and efficiently move from versions before 9 to current. The older versions use the Rails asset pipeline to package client assets. The current and recommended way is to use Webpack 4 for asset preparation. You may also need help migrating from the `rails/webpacker`'s Webpack configuration to a better setup ready for Server Side Rendering.
7
7
 
8
8
  ## Upgrading to v12
9
- * Make sure that you are on a relatively more recent version of rails and webpacker.
10
- * If the webpacker webpack config files exist, then React on Rails will not override the default
11
- assets:precompile setup by rails/webpacker. The fix is to remove the JS files inside of config/webpack,
12
- like config/webpack/production.js.
9
+ ### Recent versions
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 any older version,
12
+ and v12 doesn't work, please file an issue.
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
+
18
+ ### i18n default format changed to JSON
13
19
  * If you're using the internalization helper, then set `config.i18n_output_format = 'js'`. You can
14
- later update to the default JSON format as you will need to update your usage of that file.
20
+ later update to the default JSON format as you will need to update your usage of that file. A JSON
21
+ format is more efficient.
15
22
 
16
- * Updated API for ReactOnRails.register.
23
+ ### Updated API for `ReactOnRails.register()`
17
24
 
18
25
  In order to solve the issues regarding React Hooks compatibility, the number of parameters
19
- for functions is used to determine if you have a render function that will get invoked to
26
+ for functions is used to determine if you have a Render-Function that will get invoked to
20
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.
21
30
 
22
- Registered Objects are of the following types:
23
-
24
- ##### Correct
25
- Either of these will work:
26
- 1. Take **2 params** and return **a React function or class component**. A function component is a function
27
- that takes zero or one params and returns a React Element, like JSX.
28
- ```js
29
- export default (props, _railsContext) => () => <Component {...props} />;
30
- ```
31
+ ##### Update required for registered functions taking exactly 2 params.
31
32
 
32
- 2. Take only zero or one params and you return a React Element, often JSX.
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.
33
35
  ```js
34
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}} />;
35
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
+
36
55
  ##### Broken, as this function takes two params and it returns a React Element from a JSX Literal
37
56
  ```js
38
- export default (props, _railsContext) => <Component {...props} />;
57
+ export default (props, railsContext) => <Component {{...props, railsContext} />;
39
58
  ```
40
59
 
41
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 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. This is great for demo projects, but most real world projects will want a customized version of Webpack.
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: Recommended: Traditional React on Rails using the /client directory
23
+ ## Option 1: Default Generator Setup: rails/webpacker app/javascript
19
24
 
20
- 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`. The
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 [ShakaCode Team](http://www.shakacode.com) _recommends_ this approach for projects beyond the simplest cases as it provides the greatest transparency in your webpack and overall client-side setup. The *big advantage* to this is that almost everything within the `/client` directory will apply if you wish to convert your client-side code to a pure Single Page Application that runs without Rails. This allows you to google for how to do something with Webpack configuration and what applies to a non-Rails app will apply just as well to a React on Rails app.
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
- The two best examples of this pattern are the [react-webpack-rails-tutorial](https://github.com/shakacode/react-webpack-rails-tutorial) and the integration test example in [spec/dummy](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy).
29
+ ## Option 2: Traditional React on Rails using the /client directory
25
30
 
26
- In this case, you don't need to understand the nuances of customization of your Webpack config via the [Webpacker mechanism](./docs/additional-reading/webpack-tips.md).
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,19 +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
-
48
- Overall, consider carefully if you prefer the `rails/webpacker` directory structure and Webpack configuration, over the placement of all client side files within the `/client` directory along with conventional Webpack configuration. Once again, the `/client` directory setup is recommended.
49
-
50
- You can find more details on this topic in [Recommended Project Structure](./recommended-project-structure.md).
51
-
52
- See [Issue 982: Tutorial Generating Correct Project Structure?](https://github.com/shakacode/react_on_rails/issues/982) to discuss this issue.
53
44
 
54
- For more details on project setup, see [Recommended Project Structure](./docs/basics/recommended-project-structure.md).
@@ -19,13 +19,12 @@ The React on Rails setup provides several key components related to front-end de
19
19
  6. Happiness for us is actively participating in open source, so we want to be where the action is, which is with the npm libraries on github.com.
20
20
  7. You can get set up on React on Rails **FAST** using our application generator.
21
21
  8. By placing all client-side development inside of the `/client` directory, pure JavaScript developers can productively do development separate from Rails. Instead of Rails APIs, stub APIs on an express server can provide a simple backend, allowing for rapid iteration of UI prototypes.
22
- 9. Just because we're not relying on the Rails asset pipeline for ES6 conversion does not mean that we're deploying Rails apps in any different way. We still use the asset pipeline to include our Webpack compiled JavaScript. This only requires a few small modifications, as explained in our doc [Heroku Deployment](docs/outdated/heroku-deployment.md).
22
+ 9. Just because we're not relying on the Rails asset pipeline for ES6 conversion does not mean that we're deploying Rails apps in any different way. We still use the asset pipeline to include our Webpack compiled JavaScript. This only requires a few small modifications, as explained in our doc [Heroku Deployment](docs/basics/heroku-deployment.md).
23
23
 
24
24
  ## Convention over Configuration
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 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.
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 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.
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 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.
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
 
@@ -28,13 +28,17 @@ You can see all this on the source for [reactrails.com](https://www.reactrails.c
28
28
 
29
29
  ## Building the Bundles
30
30
 
31
- Each time you change your client code, you will need to re-generate the bundles (the webpack-created JavaScript files included in application.js). The included example Foreman `Procfile.dev` files will take care of this for you by starting a webpack process with the watch flag. This will watch your JavaScript code files for changes.
31
+ Each time you change your client code, you will need to re-generate the bundles (the webpack-created JavaScript files included in application.js). The included example Foreman `Procfile.dev` files will take care of this for you by starting a webpack process with the watch flag. This will watch your JavaScript code files for changes. Alternately, the `rails/webpacker` library also can ensure that your bundles are built.
32
32
 
33
- Simply run `foreman start -f Procfile.dev`. [Example](spec/dummy/Procfile.dev).
33
+ For example, you might create a [Procfile.dev](spec/dummy/Procfile.dev).
34
34
 
35
- On production deployments that use asset precompilation, such as Heroku deployments, React on Rails, by default, will automatically run webpack to build your JavaScript bundles. You configure the command used as `config.build_production_command` in your [config/initializers/react_on_rails.rb](docs/basics/configuration.md).
35
+ On production deployments that use asset precompilation, such as Heroku deployments, `rails/webpacker`, by default, will automatically run webpack to build your JavaScript bundles, running the command `bin/webpack` in your app.
36
36
 
37
- You can see the source code for what gets added to your precompilation [here](https://github.com/shakacode/react_on_rails/tree/master/lib/tasks/assets.rake). For more information on this topic, see [the doc on Heroku deployment](docs/outdated/heroku-deployment.md#more-details-on-precompilation-using-webpack-to-create-javascript-assets).
37
+ However, if you want to run a custom command to run webpack to build your bundles, then you will:
38
+ 1. Ensure you do not have a `config/webpack/production.js` file
39
+ 1. Define `config.build_production_command` in your [config/initializers/react_on_rails.rb](docs/basics/configuration.md)
40
+
41
+ Then React on Rails modifies the `assets:precompile` task to run your `build_production_command`.
38
42
 
39
43
  If you have used the provided generator, these bundles will automatically be added to your `.gitignore` to prevent extraneous noise from re-generated code in your pull requests. You will want to do this manually if you do not use the provided generator.
40
44
 
@@ -25,6 +25,6 @@ The default path: `public/webpack` can be loaded with webpackConfigLoader as sho
25
25
  1. Configure the `config/initializers/react_on_rails.rb`. You can adjust some necessary settings and defaults. See file [spec/dummy/config/initializers/react_on_rails.rb](spec/dummy/config/initializers/react_on_rails.rb) for a detailed example of configuration, including comments on the different values to configure.
26
26
  1. Configure your Procfiles per the example apps. These are at the root of your Rails installation.
27
27
  1. Configure your top level JavaScript files for inclusion in your layout. You'll want a version that you use for static assets, and you want a file for any files in your setup that are not part of your webpack build. The reason for this is for use with hot-reloading. If you are not using hot reloading, then you only need to configure your `application.js` file to include your Webpack generated files.
28
- 1. If you are deploying to Heroku, see [heroku-deployment.md](/docs/outdated/heroku-deployment.md)
28
+ 1. If you are deploying to Heroku, see [heroku-deployment.md](/docs/basics/heroku-deployment.md)
29
29
 
30
30
  If I missed anything, please submit a PR or file an issue.
@@ -36,13 +36,6 @@ _If you are interested in learning how to use assets in your React components, r
36
36
  _Note, this solution was removed in v14. If you're intersted in this symlink solution, please create
37
37
  a github issue._
38
38
 
39
- React on Rails creates symlinks of non-digested versions (original webpack digested file names)
40
- to the Rails deployed digested versions when doing a Rails assets compile. The solution is
41
- implemented using `assets:precompile` after-hook in
42
- file [lib/tasks/assets.rake](lib/tasks/assets.rake)
43
- The assets for symlinking are defined by `config.symlink_non_digested_assets_regex` in
44
- `config/initializers/react_on_rails.rb`.
45
-
46
39
  ## Example from /spec/dummy
47
40
 
48
41
  ```
@@ -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.
@@ -23,6 +23,8 @@ ReactOnRails.configure do |config|
23
23
  # with rspec then this controls what yarn command is run
24
24
  # to automatically refresh your webpack assets on every test run.
25
25
  #
26
+ # Alternately, you can remove the `ReactOnRails::TestHelper.configure_rspec_to_compile_assets`
27
+ # and set the config/webpacker.yml option for test to true.
26
28
  config.build_test_command = "RAILS_ENV=test bin/webpack"
27
29
 
28
30
  ################################################################################
@@ -1,5 +1,7 @@
1
1
  # frozen_string_literal: true
2
2
 
3
+ # rubocop:disable Metrics/ClassLength
4
+
3
5
  module ReactOnRails
4
6
  def self.configure
5
7
  yield(configuration)
@@ -107,10 +109,46 @@ module ReactOnRails
107
109
  check_i18n_yml_directory_exists
108
110
  check_server_render_method_is_only_execjs
109
111
  error_if_using_webpacker_and_generated_assets_dir_not_match_public_output_path
112
+ check_deprecated_settings
110
113
  end
111
114
 
112
115
  private
113
116
 
117
+ def check_deprecated_settings
118
+ if build_production_command.present? &&
119
+ ReactOnRails::WebpackerUtils.webpacker_webpack_production_config_exists?
120
+ msg = <<~MSG
121
+ Setting ReactOnRails configuration for `build_production_command` is
122
+ not necessary if you have config/webpack/production.js. When that file
123
+ exists, React on Rails DOES NOT modify the standard assets:precompile.
124
+ If you want React on Rails to modify to the standard assets:precompile
125
+ to use your config/initializers/react_on_rails.rb config.build_production_command
126
+ then delete the config/webpack/production.js.
127
+ MSG
128
+ Rails.logger.warn(msg)
129
+ end
130
+ #
131
+ # msg = <<~MSG
132
+ # ReactOnRails configuration for `build_production_command` is removed.
133
+ # Move this command into `bin/webpack` converting the script to a shell script.
134
+ # MSG
135
+ # raise ReactOnRails::Error, msg
136
+ # Commenting out until v13 when
137
+ # https://github.com/rails/webpacker/issues/2640 gets resolved
138
+ # if node_modules_location.present?
139
+ # Rails.logger.warn("ReactOnRails configuration for `node_modules_location` is deprecated. "\
140
+ # "Instead, prepend a `cd client` (or whichever location) before your test command.")
141
+ # end
142
+ #
143
+ # return unless build_production_command.present?
144
+ #
145
+ # msg = <<~MSG
146
+ # ReactOnRails configuration for `build_production_command` is removed.
147
+ # Move this command into `bin/webpack` converting the script to a shell script.
148
+ # MSG
149
+ # raise ReactOnRails::Error, msg
150
+ end
151
+
114
152
  def error_if_using_webpacker_and_generated_assets_dir_not_match_public_output_path
115
153
  return unless ReactOnRails::WebpackerUtils.using_webpacker?
116
154
 
@@ -122,12 +160,12 @@ module ReactOnRails
122
160
  Rails.logger.warn("You specified generated_assets_dir in `config/initializers/react_on_rails.rb` "\
123
161
  "with Webpacker. Remove this line from your configuration file.")
124
162
  else
125
- msg = <<-MSG.strip_heredoc
126
- Error configuring /config/initializers/react_on_rails.rb: You are using webpacker
127
- and your specified value for generated_assets_dir = #{generated_assets_dir}
128
- that does not match the value for public_output_path specified in
129
- webpacker.yml = #{webpacker_public_output_path}. You should remove the configuration
130
- value for "generated_assets_dir" from your config/initializers/react_on_rails.rb file.
163
+ msg = <<~MSG
164
+ Error configuring /config/initializers/react_on_rails.rb: You are using webpacker
165
+ and your specified value for generated_assets_dir = #{generated_assets_dir}
166
+ that does not match the value for public_output_path specified in
167
+ webpacker.yml = #{webpacker_public_output_path}. You should remove the configuration
168
+ value for "generated_assets_dir" from your config/initializers/react_on_rails.rb file.
131
169
  MSG
132
170
  raise ReactOnRails::Error, msg
133
171
  end
@@ -214,3 +252,4 @@ module ReactOnRails
214
252
  end
215
253
  end
216
254
  end
255
+ # rubocop:enable Metrics/ClassLength
@@ -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 "render function".
21
- # "render functions" differ from a React function in that they take two parameters, the
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 render function with an additional property
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 render function to return a Hash to your ruby view code, then use
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 render function for server rendering must return an Object rather than a React component.
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
- render function used by react_component_hash for #{component_name} is expected to return
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 render function must either take 2 params or have the property
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 render functions.
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
@@ -6,6 +6,23 @@ module ReactOnRails
6
6
  module TestHelper
7
7
  class WebpackAssetsCompiler
8
8
  def compile_assets
9
+ if ReactOnRails.configuration.build_test_command.blank?
10
+ msg = <<~MSG
11
+ You are using the React on Rails test helper.
12
+ Either you used:
13
+ ReactOnRails::TestHelper.configure_rspec_to_compile_assets or
14
+ ReactOnRails::TestHelper.ensure_assets_compiled
15
+ but you did not specify the config.build_test_command
16
+
17
+ React on Rails is aborting your test run
18
+
19
+ If you wish to use the config/webpacker.yml compile option for tests
20
+ them remove your call to the ReactOnRails test helper.
21
+ MSG
22
+ puts Rainbow(msg).red
23
+ exit!(1)
24
+ end
25
+
9
26
  puts "\nBuilding Webpack assets..."
10
27
 
11
28
  cmd = ReactOnRails::Utils.prepend_cd_node_modules_directory(
@@ -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. Not using webpacker, and this method returns the bundle_js_file_path
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
@@ -1,5 +1,5 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module ReactOnRails
4
- VERSION = "12.0.0-beta.2"
4
+ VERSION = "12.0.2"
5
5
  end