react_on_rails 13.4.0 → 14.0.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (142) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +21 -2
  3. data/Gemfile.development_dependencies +10 -9
  4. data/Gemfile.lock +434 -0
  5. data/README.md +25 -17
  6. data/lib/generators/react_on_rails/base_generator.rb +3 -2
  7. data/lib/generators/react_on_rails/dev_tests_generator.rb +1 -1
  8. data/lib/generators/react_on_rails/templates/base/base/config/shakapacker.yml +1 -1
  9. data/lib/generators/react_on_rails/templates/dev_tests/spec/rails_helper.rb +2 -2
  10. data/lib/generators/react_on_rails/templates/dev_tests/spec/system/hello_world_spec.rb +1 -1
  11. data/lib/react_on_rails/configuration.rb +39 -25
  12. data/lib/react_on_rails/git_utils.rb +3 -3
  13. data/lib/react_on_rails/helper.rb +3 -4
  14. data/lib/react_on_rails/json_output.rb +0 -17
  15. data/lib/react_on_rails/locales/base.rb +4 -4
  16. data/lib/react_on_rails/locales/to_js.rb +1 -1
  17. data/lib/react_on_rails/packs_generator.rb +5 -6
  18. data/lib/react_on_rails/react_component/render_options.rb +1 -1
  19. data/lib/react_on_rails/server_rendering_pool/ruby_embedded_java_script.rb +9 -9
  20. data/lib/react_on_rails/test_helper/webpack_assets_status_checker.rb +3 -3
  21. data/lib/react_on_rails/test_helper.rb +2 -2
  22. data/lib/react_on_rails/utils.rb +2 -8
  23. data/lib/react_on_rails/version.rb +1 -1
  24. data/lib/react_on_rails/version_checker.rb +2 -2
  25. data/lib/react_on_rails/webpacker_utils.rb +6 -0
  26. data/lib/tasks/assets.rake +1 -1
  27. data/react_on_rails.gemspec +4 -4
  28. metadata +5 -132
  29. data/.bookignore +0 -15
  30. data/.circleci/config.yml +0 -338
  31. data/.coveralls.yml +0 -1
  32. data/.dockerignore +0 -2
  33. data/.eslintignore +0 -17
  34. data/.eslintrc +0 -53
  35. data/.github/FUNDING.yml +0 -1
  36. data/.github/ISSUE_TEMPLATE/bug_report.md +0 -23
  37. data/.github/ISSUE_TEMPLATE/feature_request.md +0 -20
  38. data/.github/PULL_REQUEST_TEMPLATE.md +0 -19
  39. data/.github/workflows/lint-js-and-ruby.yml +0 -54
  40. data/.github/workflows/main.yml +0 -183
  41. data/.github/workflows/package-js-tests.yml +0 -35
  42. data/.github/workflows/rspec-package-specs.yml +0 -46
  43. data/.gitignore +0 -33
  44. data/.npmignore +0 -22
  45. data/.prettierignore +0 -14
  46. data/.prettierrc +0 -20
  47. data/.rspec +0 -2
  48. data/.rubocop.yml +0 -134
  49. data/.scss-lint.yml +0 -205
  50. data/.travis.yml +0 -61
  51. data/book.json +0 -18
  52. data/docs/additional-details/generator-details.md +0 -56
  53. data/docs/additional-details/manual-installation-overview.md +0 -30
  54. data/docs/additional-details/migrating-from-react-rails.md +0 -17
  55. data/docs/additional-details/recommended-project-structure.md +0 -69
  56. data/docs/additional-details/tips-for-usage-with-sp6.md +0 -15
  57. data/docs/additional-details/updating-dependencies.md +0 -31
  58. data/docs/additional-details/upgrade-webpacker-v3-to-v4.md +0 -10
  59. data/docs/api/javascript-api.md +0 -99
  60. data/docs/api/redux-store-api.md +0 -102
  61. data/docs/api/view-helpers-api.md +0 -133
  62. data/docs/contributor-info/errors-with-hooks.md +0 -45
  63. data/docs/contributor-info/generator-testing.md +0 -11
  64. data/docs/contributor-info/linters.md +0 -68
  65. data/docs/contributor-info/pull-requests.md +0 -42
  66. data/docs/contributor-info/releasing.md +0 -76
  67. data/docs/deployment/elastic-beanstalk.md +0 -63
  68. data/docs/deployment/heroku-deployment.md +0 -39
  69. data/docs/getting-started.md +0 -196
  70. data/docs/guides/client-vs-server-rendering.md +0 -27
  71. data/docs/guides/configuration.md +0 -289
  72. data/docs/guides/deployment.md +0 -5
  73. data/docs/guides/file-system-based-automated-bundle-generation.md +0 -197
  74. data/docs/guides/hmr-and-hot-reloading-with-the-webpack-dev-server.md +0 -104
  75. data/docs/guides/how-react-on-rails-works.md +0 -44
  76. data/docs/guides/how-to-conditionally-server-render-based-on-device-type.md +0 -40
  77. data/docs/guides/how-to-use-different-files-for-client-and-server-rendering.md +0 -98
  78. data/docs/guides/i18n.md +0 -87
  79. data/docs/guides/installation-into-an-existing-rails-app.md +0 -66
  80. data/docs/guides/minitest-configuration.md +0 -31
  81. data/docs/guides/rails-webpacker-react-integration-options.md +0 -213
  82. data/docs/guides/react-on-rails-overview.md +0 -29
  83. data/docs/guides/react-server-rendering.md +0 -32
  84. data/docs/guides/render-functions-and-railscontext.md +0 -205
  85. data/docs/guides/rspec-configuration.md +0 -73
  86. data/docs/guides/tutorial.md +0 -371
  87. data/docs/guides/upgrading-react-on-rails.md +0 -304
  88. data/docs/guides/webpack-configuration.md +0 -42
  89. data/docs/home.md +0 -23
  90. data/docs/javascript/angular-js-integration-migration.md +0 -28
  91. data/docs/javascript/asset-pipeline.md +0 -12
  92. data/docs/javascript/capistrano-deployment.md +0 -18
  93. data/docs/javascript/code-splitting.md +0 -165
  94. data/docs/javascript/converting-from-custom-webpack-config-to-rails-webpacker-config.md +0 -10
  95. data/docs/javascript/credits.md +0 -10
  96. data/docs/javascript/foreman-issues.md +0 -15
  97. data/docs/javascript/images.md +0 -57
  98. data/docs/javascript/node-dependencies-and-npm.md +0 -19
  99. data/docs/javascript/react-and-redux.md +0 -36
  100. data/docs/javascript/react-helmet.md +0 -100
  101. data/docs/javascript/react-router.md +0 -90
  102. data/docs/javascript/server-rendering-tips.md +0 -55
  103. data/docs/javascript/troubleshooting-when-using-shakapacker.md +0 -77
  104. data/docs/javascript/troubleshooting-when-using-webpacker.md +0 -90
  105. data/docs/javascript/webpack-v1-notes.md +0 -23
  106. data/docs/javascript/webpack.md +0 -22
  107. data/docs/misc/articles.md +0 -20
  108. data/docs/misc/code_of_conduct.md +0 -13
  109. data/docs/misc/doctrine.md +0 -77
  110. data/docs/misc/style.md +0 -33
  111. data/docs/misc/tips.md +0 -10
  112. data/docs/outdated/deferred-rendering.md +0 -39
  113. data/docs/outdated/rails-assets-relative-paths.md +0 -195
  114. data/docs/outdated/rails-assets.md +0 -77
  115. data/docs/outdated/rails3.md +0 -9
  116. data/docs/rails/convert-rails-5-api-only-app.md +0 -19
  117. data/docs/rails/rails-engine-integration.md +0 -32
  118. data/docs/rails/rails_view_rendering_from_inline_javascript.md +0 -36
  119. data/docs/rails/turbolinks.md +0 -124
  120. data/docs/react-on-rails-pro/react-on-rails-pro.md +0 -43
  121. data/docs/testimonials/hvmn.md +0 -25
  122. data/docs/testimonials/resortpass.md +0 -13
  123. data/docs/testimonials/testimonials.md +0 -28
  124. data/jest.config.js +0 -4
  125. data/package-scripts.yml +0 -49
  126. data/package.json +0 -96
  127. data/rakelib/docker.rake +0 -26
  128. data/rakelib/dummy_apps.rake +0 -30
  129. data/rakelib/example_type.rb +0 -96
  130. data/rakelib/examples.rake +0 -64
  131. data/rakelib/examples_config.yml +0 -14
  132. data/rakelib/lint.rake +0 -30
  133. data/rakelib/node_package.rake +0 -15
  134. data/rakelib/release.rake +0 -92
  135. data/rakelib/run_rspec.rake +0 -103
  136. data/rakelib/task_helpers.rb +0 -62
  137. data/script/bootstrap +0 -33
  138. data/script/release +0 -3
  139. data/script/setup +0 -23
  140. data/script/test +0 -38
  141. data/webpackConfigLoader.js +0 -71
  142. data/yarn.lock +0 -7010
@@ -1,213 +0,0 @@
1
- # Shakapacker (Rails/Webpacker) React Integration Options
2
-
3
- You only _need_ props hydration if you need SSR. However, there's no good reason to
4
- have your app make a second round trip to the Rails server to get initialization props.
5
-
6
- **Server-Side Rendering (SSR)** results in Rails rendering HTML for your React components. The main reasons to use SSR are better SEO and pages display more quickly.
7
-
8
- These gems provide advanced integration of React with [shakacode/shakapacker](https://github.com/shakacode/shakapacker):
9
-
10
- | Gem | Props Hydration | Server-Side-Rendering (SSR) | SSR with HMR | SSR with React-Router | SSR with Code Splitting | Node SSR |
11
- | --- | --------------- | --- | --------------------- | ----------------------| ------------------------|----|
12
- | [shakacode/react_on_rails](https://github.com/shakacode/react_on_rails) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
13
- | [react-rails](https://github.com/reactjs/react-rails) | ✅ | ✅ | | | | | |
14
- | [webpacker-react](https://github.com/renchap/webpacker-react) | ✅ | | | | | | |
15
-
16
- Note, Node SSR for React on Rails requires [React on Rails Pro](https://www.shakacode.com/react-on-rails-pro/).
17
-
18
- ---
19
-
20
- As mentioned, you don't _need_ to use a gem to integrate Rails with React.
21
-
22
- If you're not concerned with view helpers to pass props or server rendering, you can do it yourself:
23
-
24
- ```erb
25
- <%# views/layouts/application.html.erb %>
26
-
27
- <%= content_tag :div,
28
- id: "hello-react",
29
- data: {
30
- message: 'Hello!',
31
- name: 'David'
32
- }.to_json do %>
33
- <% end %>
34
- ```
35
-
36
- ```js
37
- // app/javascript/packs/hello_react.js
38
-
39
- const Hello = props => (
40
- <div className='react-app-wrapper'>
41
- <img src={clockIcon} alt="clock" />
42
- <h5 className='hello-react'>
43
- {props.message} {props.name}!
44
- </h5>
45
- </div>
46
- )
47
-
48
- // Render component with data
49
- document.addEventListener('DOMContentLoaded', () => {
50
- const node = document.getElementById('hello-react')
51
- const data = JSON.parse(node.getAttribute('data'))
52
-
53
- ReactDOM.render(<Hello {...data} />, node)
54
- })
55
- ```
56
-
57
- ----
58
-
59
- ## Suppress warning related to Can't resolve 'react-dom/client' in React < 18
60
-
61
- You may see a warning like this when building a Webpack bundle using any version of React below 18:
62
-
63
- ```
64
- Module not found: Error: Can't resolve 'react-dom/client' in ....
65
- ```
66
-
67
- It can be safely [suppressed](https://webpack.js.org/configuration/other-options/#ignorewarnings) in your Webpack configuration. The following is an example of this suppression in `config/webpack/commonWebpackConfig.js`:
68
-
69
- ```js
70
- const { webpackConfig: baseClientWebpackConfig, merge } = require('shakapacker');
71
-
72
- const commonOptions = {
73
- resolve: {
74
- extensions: ['.css', '.ts', '.tsx'],
75
- },
76
- };
77
-
78
- const ignoreWarningsConfig = {
79
- ignoreWarnings: [/Module not found: Error: Can't resolve 'react-dom\/client'/],
80
- };
81
-
82
- const commonWebpackConfig = () => merge({}, baseClientWebpackConfig, commonOptions, ignoreWarningsConfig);
83
-
84
- module.exports = commonWebpackConfig;
85
- ```
86
-
87
- ----
88
-
89
- ## HMR and React Hot Reloading
90
-
91
- Before turning HMR on, consider upgrading to the latest stable gems and packages:
92
- https://github.com/shakacode/shakapacker#upgrading
93
-
94
- Configure `config/shakapacker.yml` file:
95
-
96
- ```yaml
97
- development:
98
- extract_css: false
99
- dev_server:
100
- hmr: true
101
- inline: true
102
- ```
103
-
104
- This basic configuration alone will have HMR working with the default Shakapacker setup. However, a code save will trigger a full page refresh each time you save a file.
105
-
106
- Webpack's HMR allows the replacement of modules for React in-place without reloading the browser. To do this, you have two options:
107
-
108
- 1. Steps below for the [github.com/pmmmwh/react-refresh-webpack-plugin](https://github.com/pmmmwh/react-refresh-webpack-plugin).
109
- 1. Deprecated steps below for using the [github.com/gaearon/react-hot-loader](https://github.com/gaearon/react-hot-loader).
110
-
111
- ### React Refresh Webpack Plugin
112
- [github.com/pmmmwh/react-refresh-webpack-plugin](https://github.com/pmmmwh/react-refresh-webpack-plugin)
113
-
114
- You can see an example commit of adding this [here](https://github.com/shakacode/react_on_rails_demo_ssr_hmr/commit/7e53803fce7034f5ecff335db1f400a5743a87e7).
115
-
116
- 1. Add react refresh packages:
117
- `yarn add @pmmmwh/react-refresh-webpack-plugin react-refresh -D`
118
- 2. Update `babel.config.js` adding
119
- ```js
120
- plugins: [
121
- process.env.WEBPACK_DEV_SERVER && 'react-refresh/babel',
122
- // other plugins
123
- ```
124
- 3. Update `config/webpack/development.js`, only including the plugin if running the WEBPACK_DEV_SERVER
125
- ```js
126
- const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
127
- const environment = require('./environment')
128
-
129
- const isWebpackDevServer = process.env.WEBPACK_DEV_SERVER;
130
-
131
- //plugins
132
- if (isWebpackDevServer) {
133
- environment.plugins.append(
134
- 'ReactRefreshWebpackPlugin',
135
- new ReactRefreshWebpackPlugin({
136
- overlay: {
137
- sockPort: 3035
138
- }
139
- })
140
- );
141
- }
142
- ```
143
-
144
- ---
145
-
146
- ### React Hot Loader (Deprecated)
147
-
148
- 1. Add the `react-hot-loader` and ` @hot-loader/react-dom` npm packages.
149
- ```sh
150
- yarn add --dev react-hot-loader @hot-loader/react-dom
151
- ```
152
-
153
- 2. Update your babel config, `babel.config.js`. Add the plugin `react-hot-loader/babel`
154
- with option `"safetyNet": false`:
155
-
156
- ```
157
- {
158
- "plugins": [
159
- [
160
- "react-hot-loader/babel",
161
- {
162
- "safetyNet": false
163
- }
164
- ]
165
- ]
166
- }
167
- ```
168
-
169
- 3. Add changes like this to your entry points:
170
-
171
- ```diff
172
- // app/javascript/app.jsx
173
-
174
- import React from 'react';
175
- + import { hot } from 'react-hot-loader/root';
176
-
177
- const App = () => <SomeComponent(s) />
178
-
179
- - export default App;
180
- + export default hot(App);
181
- ```
182
-
183
- 4. Adjust your webpack configuration for development so that `sourceMapContents` option for the sass
184
- loader is `false`:
185
-
186
- ```diff
187
- // config/webpack/development.js
188
-
189
- process.env.NODE_ENV = process.env.NODE_ENV || 'development'
190
-
191
- const environment = require('./environment')
192
-
193
- // allows for editing sass/scss files directly in browser
194
- + if (!module.hot) {
195
- + environment.loaders.get('sass').use.find(item => item.loader === 'sass-loader').options.sourceMapContents = false
196
- + }
197
- +
198
- module.exports = environment.toWebpackConfig()
199
- ```
200
-
201
- 5. Adjust your `config/webpack/environment.js` for a
202
-
203
- ```diff
204
- // config/webpack/environment.js
205
-
206
- // ...
207
-
208
- // Fixes: React-Hot-Loader: react-🔥-dom patch is not detected. React 16.6+ features may not work.
209
- // https://github.com/gaearon/react-hot-loader/issues/1227#issuecomment-482139583
210
- + environment.config.merge({ resolve: { alias: { 'react-dom': '@hot-loader/react-dom' } } });
211
-
212
- module.exports = environment;
213
- ```
@@ -1,29 +0,0 @@
1
- # React on Rails
2
-
3
- React on Rails integrates Rails with (server rendering of) Facebook's [React](https://github.com/facebook/react) front-end framework.
4
-
5
- ---
6
-
7
- # Project Objective
8
-
9
- To provide a high performance framework for integrating Ruby on Rails with React via the [**Shakapacker**](https://github.com/shakacode/shakapacker) gem especially in regards to React Server-Side Rendering for better SEO and improved performance.
10
-
11
- # Features and Why React on Rails?
12
-
13
- 1. Easy passing of props directly from your Rails view to your React components rather than having your Rails view load and then make a separate request to your API.
14
- 1. Tight integration with [shakacode/shakapacker](https://github.com/shakacode/shakapacker).
15
- 1. Server-Side Rendering (SSR), often used for SEO crawler indexing and UX performance, is not offered by `shakacode/shakapacker`.
16
- 1. Support for HMR for a great developer experience.
17
- 1. Supports latest versions of React with hooks.
18
- 1. [Redux](https://github.com/reactjs/redux) and [React Router](https://github.com/ReactTraining/react-router#readme) integration including server-side-rendering.
19
- 1. [Internationalization (I18n) and (localization)](https://www.shakacode.com/react-on-rails/docs/guides/i18n/)
20
- 1. A supportive community. This [web search shows how live public sites are using React on Rails](https://publicwww.com/websites/%22react-on-rails%22++-undeveloped.com+depth%3Aall/).
21
- 1. [ReScript (Reason ML) Support](https://github.com/shakacode/reason-react-on-rails-example).
22
-
23
- See the [react-webpack-rails-tutorial](https://github.com/shakacode/react-webpack-rails-tutorial) for an example of a live implementation and code.
24
-
25
- ----
26
-
27
- ## Prerequisites
28
- - Ruby on Rails >=5
29
- - Shakapacker 6.5.1+.
@@ -1,32 +0,0 @@
1
- # React Server Rendering
2
-
3
- See also [Client vs. Server Rendering](https://www.shakacode.com/react-on-rails/docs/guides/client-vs-server-rendering/).
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_demo_ssr_hmr](https://github.com/shakacode/react_on_rails_demo_ssr_hmr).
7
-
8
- ## What is Server Rendering?
9
-
10
- Here's a [decent article to introduce you to server rendering](https://medium.freecodecamp.org/server-side-rendering-your-react-app-in-three-simple-steps-7a82b95db82e). Note, React on Rails takes care of calling the methods in [ReactDOMServer](https://reactjs.org/docs/react-dom-server.html).
11
-
12
- During the Rails rendering of HTML per a browser request, the Rails server will execute some JavaScript to create a string of HTML used for React server rendering. This resulting HTML is placed with in your Rails view's output.
13
-
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).
15
-
16
- See [this note](https://www.shakacode.com/react-on-rails/docs/guides/client-vs-server-rendering/).
17
-
18
- ## How do you do Server Rendering with React on Rails?
19
- 1. The `react_component` view helper method provides the `prerender:` option to switch on or off server rendering.
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 code splitting, handling CSS and images, different code paths for React Router on the server vs. client, etc.
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.
23
-
24
- ## Do you need server rendering?
25
-
26
- Server rendering is used for either SEO or performance reasons.
27
-
28
- ## Considerations for what code can run on in server rendering
29
-
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.
31
- 2. JavaScript calls to `setTimeout`, `setInterval`, and `clearInterval` similarly don't make sense 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/).
@@ -1,205 +0,0 @@
1
- # Render-Functions and the Rails Context
2
-
3
- ## Render-Functions
4
-
5
- When you use a render-function to create react components (or renderedHtml on the server), or you
6
- used shared redux stores, you get two params passed to your function that creates a React component:
7
-
8
- 1. `props`: Props that you pass in the view helper of either `react_component` or `redux_store`
9
- 2. `railsContext`: Rails contextual information, such as the current pathname. You can customize
10
- this in your config file. **Note**: The `railsContext` is not related to the concept of a
11
- ["context" for React components](https://facebook.github.io/react/docs/context.html#how-to-use-context).
12
-
13
- These parameters (`props` and `railsContext`) will be the same regardless of either client or server
14
- side rendering, except for the key `serverSide` based on whether or not you are server rendering.
15
-
16
- While you could manually configure your Rails code to pass the "`railsContext` information" with
17
- the rest of your "props", the `railsContext` is a convenience because it's passed consistently to
18
- all invocations of Render-Functions.
19
-
20
- For example, suppose you create a "render-function" called MyAppComponent.
21
-
22
- ```js
23
- import React from 'react';
24
- const MyAppComponent = (props, railsContext) => (
25
- // NOTE: need to wrap in a function so this is proper React function component that can use
26
- // hooks
27
-
28
- // the props get passed again, but we ignore since we use a closure
29
- // or should we
30
- () =>
31
- <div>
32
- <p>props are: {JSON.stringify(props)}</p>
33
- <p>railsContext is: {JSON.stringify(railsContext)}
34
- </p>
35
- </div>
36
- );
37
- export default MyAppComponent;
38
- ```
39
-
40
- ------------------------------
41
-
42
- _This would be alternate API where you have to call React.createElement and the React on Rails code doesn't do that._
43
-
44
- ```js
45
- import React from 'react';
46
- const MyAppComponent = (props, railsContext) => (
47
- // NOTE: need to wrap in a function so this is proper React function component that can use
48
- // hooks
49
- React.createElement(
50
- () =>
51
- <div>
52
- <p>props are: {JSON.stringify(props)}</p>
53
- <p>railsContext is: {JSON.stringify(railsContext)}
54
- </p>
55
- </div>,
56
- props)
57
- );
58
- export default MyAppComponent;
59
- ```
60
-
61
- ------------------------------------
62
-
63
- *Note: you will get a React browser console warning if you try to serverRender this since the value of `serverSide` will be different for server rendering.*
64
-
65
- So if you register your render-function `MyAppComponent`, it will get called like:
66
-
67
- ```js
68
- reactComponent = MyAppComponent(props, railsContext);
69
- ```
70
-
71
- and, similarly, any redux store is always initialized with 2 parameters:
72
-
73
- ```js
74
- reduxStore = MyReduxStore(props, railsContext);
75
- ```
76
-
77
- Note: you never make these calls. React on Rails makes these calls when it does either client or server rendering. You will define functions that take these 2 params and return a React component or a Redux Store. Naturally, you do not have to use second parameter of the railsContext if you do not need it. If you don't take a second parameter, then you're probably defining a React function component and you will simply return a React Element, often just JSX.
78
-
79
- (Note: see below [section](#multiple-react-components-on-a-page-with-one-store) on how to setup redux stores that allow multiple components to talk to the same store.)
80
-
81
- The `railsContext` has: (see implementation in file [ReactOnRails::Helper](https://github.com/shakacode/react_on_rails/tree/master/lib/react_on_rails/helper.rb), method `rails_context` for the definitive list).
82
-
83
- ```ruby
84
- {
85
- railsEnv: Rails.env
86
- inMailer: in_mailer?,
87
- # Locale settings
88
- i18nLocale: I18n.locale,
89
- i18nDefaultLocale: I18n.default_locale,
90
- rorVersion: ReactOnRails::VERSION,
91
- rorPro: ReactOnRails::Utils.react_on_rails_pro?
92
-
93
- # URL settings
94
- href: request.original_url,
95
- location: "#{uri.path}#{uri.query.present? ? "?#{uri.query}": ""}",
96
- scheme: uri.scheme, # http
97
- host: uri.host, # foo.com
98
- port: uri.port,
99
- pathname: uri.path, # /posts
100
- search: uri.query, # id=30&limit=5
101
- httpAcceptLanguage: request.env["HTTP_ACCEPT_LANGUAGE"]
102
-
103
- # Other
104
- serverSide: boolean # Are we being called on the server or client? Note: if you conditionally
105
- # render something different on the server than the client, then React will only show the
106
- # server version!
107
- }
108
- ```
109
-
110
- Plus, you can add your customizations to this. See "rendering extension" below.
111
-
112
- ## Rails Context
113
-
114
- The `railsContext` is a second param passed to your render-functions for React components. This is in addition to the props that are passed from the `react_component` Rails helper. For example:
115
-
116
- ERB view file:
117
-
118
- ```ruby
119
- # Rails View
120
- <%= react_component("HelloWorld", props: { name: "Stranger" }) %>
121
- ```
122
-
123
- This is what your HelloWorld.js file might contain. The railsContext is always available for any parameters that you _always_ want available for your React components. It has _nothing_ to do with the concept of the [React Context](https://reactjs.org/docs/context.html).
124
-
125
- ```js
126
- import React from 'react';
127
-
128
- export default (props, railsContext) => {
129
- // Note, wrap in a function so this is React function component
130
- return () => (
131
- <div>
132
- Your locale is {railsContext.i18nLocale}.<br/>
133
- Hello, {props.name}!
134
- </div>
135
- );
136
- };
137
- ```
138
-
139
- ## Why is the railsContext only passed to render-functions?
140
-
141
- There's no reason that the railsContext would ever get passed to your React component unless the value is explicitly put into the props used for rendering. If you create a react component, rather than a render-function, for use by React on Rails, then you get whatever props are passed in from the view helper, which **does not include the Rails Context**. It's trivial to wrap your component in a "render-function" to return a new component that takes both:
142
-
143
- ```js
144
- import React from 'react';
145
- import AppComponent from './AppComponent';
146
- const AppComponentWithRailsContext = (props, railsContext) => (
147
- // Create a React Function Component so you can
148
- // use the React Hooks API in this React Function Component
149
- () => <AppComponent {...{...props, railsContext}}/>
150
- )
151
- export default AppComponentWithRailsContext;
152
- ```
153
-
154
- Consider this line in depth:
155
-
156
- ```js
157
- <AppComponent {...{ ...props, railsContext }}/>
158
- ```
159
-
160
- The outer `{...` is for the [JSX spread operator for attributes](https://facebook.github.io/react/docs/jsx-in-depth.html#spread-attributes) and the innner `{...` is for the [Spread in object literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator#Spread_in_object_literals).
161
-
162
- ## Use Cases
163
-
164
- ### Heroku Preboot Considerations
165
-
166
- [Heroku Preboot](https://devcenter.heroku.com/articles/preboot) is a feature on Heroku that allows for faster deploy times. When you promote your staging app to production, Preboot simply switches the production server to point at the staging app's container. This means it can deploy much faster since it doesn't have to rebuild anything. However, this means that if you use the [Define Plugin](https://github.com/webpack/docs/wiki/list-of-plugins#defineplugin) to provide the rails environment to your client code as a variable, that variable will erroneously still have a value of `Staging` instead of `Production`. The `Rails.env` provided at runtime in the railsContext is, however, accurate.
167
-
168
- ### Needing the current URL path for server rendering
169
-
170
- Suppose you want to display a nav bar with the current navigation link highlighted by the URL. When you server-render the code, your code will need to know the current URL/path. The new `railsContext` has this information. Your application will apply something like an "active" class on the server rendering.
171
-
172
- ### Configuring different code for server side rendering
173
-
174
- Suppose you want to turn off animation when doing server side rendering. The `serverSide` value is just what you need.
175
-
176
- ## Customization of the rails_context
177
-
178
- You can customize the values passed in the `railsContext` in your `config/initializers/react_on_rails.rb`. Here's how.
179
-
180
- Set the config value for the `rendering_extension`:
181
-
182
- ```ruby
183
- config.rendering_extension = RenderingExtension
184
- ```
185
-
186
- Implement it like this above in the same file. Create a class method on the module called `custom_context` that takes the `view_context` for a param.
187
-
188
- See [spec/dummy/config/initializers/react_on_rails.rb](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/config/initializers/react_on_rails.rb) for a detailed example.
189
-
190
- ```ruby
191
- module RenderingExtension
192
-
193
- # Return a Hash that contains custom values from the view context that will get merged with
194
- # the standard rails_context values and passed to all calls to render-functions used by the
195
- # react_component and redux_store view helpers
196
- def self.custom_context(view_context)
197
- {
198
- somethingUseful: view_context.session[:something_useful]
199
- }
200
- end
201
- end
202
- ```
203
-
204
- In this case, a prop and value for `somethingUseful` will go into the railsContext passed to all react_component and redux_store calls. You may set any values available in the view rendering context.
205
-
@@ -1,73 +0,0 @@
1
- # RSpec Configuration
2
- _Click [here for minitest](https://www.shakacode.com/react-on-rails/docs/guides/minitest-configuration/)_
3
-
4
- # If your webpack configurations correspond to Shakapacker's default setup
5
- If you're able to configure your webpack configuration to be run by having your webpack configuration
6
- returned by the files in `/config/webpack`, then you have 2 options to ensure that your files are
7
- compiled by webpack before running tests and during production deployment:
8
-
9
- 1. **Use Shakapacker's compile option**: Configure your `config/shakapacker.yml` so that `compile: true` is for `test` and `production`
10
- environments. Ensure that your `source_path` is correct, or else `Shakapacker` won't correctly
11
- detect changes.
12
- 2. **Use the react_on_rails settings and helpers**. Use the settings in `config/initializers/react_on_rails.rb`. Refer to [docs/configuration](https://www.shakacode.com/react-on-rails/docs/guides/configuration/).
13
-
14
- ```yml
15
- config.build_test_command = "NODE_ENV=test RAILS_ENV=test bin/shakapacker"
16
- ```
17
-
18
- Which should you use? If you're already using the `Shakapacker` way to configure webpack, then
19
- you can keep things simple and use the `Shakapacker` options.
20
-
21
- # Checking for stale assets using React on Rails
22
-
23
- Because you will probably want to run RSpec tests that rely on compiled webpack assets (typically, your integration/feature specs where `js: true`), you will want to ensure you don't accidentally run tests on missing or stale webpack assets. If you did use stale Webpack assets, you will get invalid test results as your tests do not use the very latest JavaScript code.
24
-
25
- As mentioned above, you can configure `compile: true` in `config/shakapacker.yml` _if_ you've got configuration for
26
- your webpack in the standard `Shakapacker` spot of `config/webpack/<NODE_ENV>.js`
27
-
28
- ReactOnRails also provides a helper method called `ReactOnRails::TestHelper.configure_rspec_to_compile_assets`. Call this method from inside of the `RSpec.configure` block in your `spec/rails_helper.rb` file, passing the config as an argument. See file [lib/react_on_rails/test_helper.rb](https://github.com/shakacode/react_on_rails/tree/master/lib/react_on_rails/test_helper.rb) for more details. You can customize this to your particular needs by replacing any of the default components used by `ReactOnRails::TestHelper.configure_rspec_to_compile_assets`.
29
-
30
- ```ruby
31
- RSpec.configure do |config|
32
- ReactOnRails::TestHelper.configure_rspec_to_compile_assets(config)
33
- ```
34
-
35
- 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`, `:server_rendering`, or `:controller` (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. If you don't specify these metatags for your relevant JavaScript tests, then you'll need to do the following.
36
-
37
- 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`:
38
-
39
- ```ruby
40
- ReactOnRails::TestHelper.configure_rspec_to_compile_assets(config, :requires_webpack_assets)
41
- config.define_derived_metadata(file_path: %r{spec/(features|requests)}) do |metadata|
42
- metadata[:requires_webpack_assets] = true
43
- end
44
- ```
45
-
46
- Please take note of the following:
47
- - If you are using Shakapacker, be **SURE** to configure the `source_path` in your `config/shakapacker.yml` unless you are using the defaults for Shakapacker.
48
-
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 Shakapacker, the default value will come from the `config/shakapacker.yml` value for the `public_output_path` and the `source_path`
50
-
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.
52
-
53
- - By default, the webpack processes look in the webpack generated files folder, configured via the `config/shakapacker.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.
54
-
55
- The following `config/react_on_rails.rb` settings **must** match your setup:
56
- ```ruby
57
- # Define the files we need to check for webpack compilation when running tests.
58
- config.webpack_generated_files = %w( manifest.json )
59
-
60
- # OR if you're not hashing the server-bundle.js, then you should include your server-bundle.js in the list.
61
- # config.webpack_generated_files = %w( server-bundle.js manifest.json )
62
-
63
- # If you are using the ReactOnRails::TestHelper.configure_rspec_to_compile_assets(config)
64
- # with rspec then this controls what yarn command is run
65
- # to automatically refresh your webpack assets on every test run.
66
- config.build_test_command = "yarn run build:test"
67
- ```
68
-
69
- If you want to speed up the re-compiling process so you don't wait to run your tests to build the files, you can run your test compilation with the "watch" flags. For example, `yarn run build:test --watch`
70
-
71
- ![2016-01-27_02-36-43](https://cloud.githubusercontent.com/assets/1118459/12611951/7c56d070-c4a4-11e5-8a80-9615f99960d9.png)
72
-
73
- ![2016-01-27_03-18-05](https://cloud.githubusercontent.com/assets/1118459/12611975/a8011654-c4a4-11e5-84f9-1baca4835b4b.png)