react_on_rails 11.0.5 → 13.4.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (199) hide show
  1. checksums.yaml +5 -5
  2. data/.circleci/config.yml +338 -0
  3. data/.eslintignore +2 -1
  4. data/.eslintrc +32 -3
  5. data/.github/FUNDING.yml +1 -0
  6. data/.github/ISSUE_TEMPLATE/bug_report.md +23 -0
  7. data/.github/ISSUE_TEMPLATE/feature_request.md +20 -0
  8. data/.github/PULL_REQUEST_TEMPLATE.md +19 -0
  9. data/.github/workflows/lint-js-and-ruby.yml +54 -0
  10. data/.github/workflows/main.yml +183 -0
  11. data/.github/workflows/package-js-tests.yml +35 -0
  12. data/.github/workflows/rspec-package-specs.yml +46 -0
  13. data/.gitignore +3 -4
  14. data/.prettierignore +14 -0
  15. data/.prettierrc +20 -0
  16. data/.rubocop.yml +76 -34
  17. data/.travis.yml +15 -22
  18. data/CHANGELOG.md +443 -55
  19. data/CONTRIBUTING.md +62 -80
  20. data/Gemfile +1 -35
  21. data/Gemfile.development_dependencies +50 -0
  22. data/KUDOS.md +4 -1
  23. data/{docs/LICENSE.md → LICENSE.md} +1 -1
  24. data/NEWS.md +14 -4
  25. data/REACT-ON-RAILS-PRO-LICENSE +95 -0
  26. data/README.md +107 -802
  27. data/Rakefile +1 -8
  28. data/SUMMARY.md +51 -29
  29. data/book.json +5 -5
  30. data/docs/{basics/generator.md → additional-details/generator-details.md} +5 -13
  31. data/docs/{basics/installation-overview.md → additional-details/manual-installation-overview.md} +9 -14
  32. data/docs/{basics → additional-details}/migrating-from-react-rails.md +1 -1
  33. data/docs/additional-details/recommended-project-structure.md +69 -0
  34. data/docs/additional-details/tips-for-usage-with-sp6.md +15 -0
  35. data/docs/additional-details/upgrade-webpacker-v3-to-v4.md +10 -0
  36. data/docs/api/javascript-api.md +35 -6
  37. data/docs/api/redux-store-api.md +102 -0
  38. data/docs/api/view-helpers-api.md +133 -0
  39. data/docs/contributor-info/errors-with-hooks.md +45 -0
  40. data/docs/contributor-info/linters.md +5 -6
  41. data/docs/contributor-info/pull-requests.md +42 -0
  42. data/docs/contributor-info/releasing.md +1 -1
  43. data/docs/deployment/heroku-deployment.md +39 -0
  44. data/docs/getting-started.md +196 -0
  45. data/docs/guides/client-vs-server-rendering.md +27 -0
  46. data/docs/guides/configuration.md +289 -0
  47. data/docs/guides/deployment.md +5 -0
  48. data/docs/guides/file-system-based-automated-bundle-generation.md +197 -0
  49. data/docs/guides/hmr-and-hot-reloading-with-the-webpack-dev-server.md +104 -0
  50. data/docs/guides/how-react-on-rails-works.md +44 -0
  51. data/docs/guides/how-to-conditionally-server-render-based-on-device-type.md +40 -0
  52. data/docs/guides/how-to-use-different-files-for-client-and-server-rendering.md +98 -0
  53. data/docs/guides/i18n.md +87 -0
  54. data/docs/guides/installation-into-an-existing-rails-app.md +66 -0
  55. data/docs/guides/minitest-configuration.md +31 -0
  56. data/docs/guides/rails-webpacker-react-integration-options.md +213 -0
  57. data/docs/guides/react-on-rails-overview.md +29 -0
  58. data/docs/guides/react-server-rendering.md +32 -0
  59. data/docs/guides/render-functions-and-railscontext.md +205 -0
  60. data/docs/guides/rspec-configuration.md +73 -0
  61. data/docs/guides/tutorial.md +371 -0
  62. data/docs/{basics → guides}/upgrading-react-on-rails.md +126 -3
  63. data/docs/guides/webpack-configuration.md +42 -0
  64. data/docs/home.md +23 -0
  65. data/docs/javascript/asset-pipeline.md +12 -0
  66. data/docs/{additional-reading → javascript}/code-splitting.md +21 -11
  67. data/docs/javascript/converting-from-custom-webpack-config-to-rails-webpacker-config.md +10 -0
  68. data/docs/javascript/credits.md +10 -0
  69. data/docs/{additional-reading → javascript}/images.md +5 -6
  70. data/docs/javascript/react-helmet.md +100 -0
  71. data/docs/javascript/react-router.md +90 -0
  72. data/docs/{additional-reading → javascript}/server-rendering-tips.md +15 -12
  73. data/docs/javascript/troubleshooting-when-using-shakapacker.md +77 -0
  74. data/docs/{additional-reading → javascript}/webpack.md +2 -2
  75. data/docs/misc/articles.md +20 -0
  76. data/docs/misc/doctrine.md +5 -6
  77. data/docs/outdated/deferred-rendering.md +39 -0
  78. data/docs/{additional-reading → outdated}/rails-assets-relative-paths.md +4 -4
  79. data/docs/{additional-reading → outdated}/rails-assets.md +12 -20
  80. data/docs/{misc → outdated}/rails3.md +2 -2
  81. data/docs/rails/convert-rails-5-api-only-app.md +19 -0
  82. data/docs/rails/rails-engine-integration.md +32 -0
  83. data/docs/{additional-reading → rails}/rails_view_rendering_from_inline_javascript.md +2 -1
  84. data/docs/{additional-reading → rails}/turbolinks.md +13 -1
  85. data/docs/react-on-rails-pro/react-on-rails-pro.md +43 -0
  86. data/docs/testimonials/hvmn.md +25 -0
  87. data/docs/testimonials/resortpass.md +13 -0
  88. data/docs/testimonials/testimonials.md +28 -0
  89. data/jest.config.js +4 -0
  90. data/lib/generators/USAGE +1 -1
  91. data/lib/generators/react_on_rails/adapt_for_older_shakapacker_generator.rb +41 -0
  92. data/lib/generators/react_on_rails/base_generator.rb +55 -43
  93. data/lib/generators/react_on_rails/bin/dev +30 -0
  94. data/lib/generators/react_on_rails/bin/dev-static +30 -0
  95. data/lib/generators/react_on_rails/dev_tests_generator.rb +4 -3
  96. data/lib/generators/react_on_rails/generator_helper.rb +8 -6
  97. data/lib/generators/react_on_rails/generator_messages.rb +40 -0
  98. data/lib/generators/react_on_rails/install_generator.rb +37 -0
  99. data/lib/generators/react_on_rails/templates/.eslintrc +3 -1
  100. data/lib/generators/react_on_rails/templates/base/base/Procfile.dev +4 -6
  101. data/lib/generators/react_on_rails/templates/base/base/Procfile.dev-static +9 -0
  102. data/lib/generators/react_on_rails/templates/base/base/app/javascript/bundles/HelloWorld/components/HelloWorld.jsx +21 -40
  103. data/lib/generators/react_on_rails/templates/base/base/app/javascript/bundles/HelloWorld/components/HelloWorld.module.css +4 -0
  104. data/lib/generators/react_on_rails/templates/base/base/app/javascript/bundles/HelloWorld/components/HelloWorldServer.js +5 -0
  105. data/lib/generators/react_on_rails/templates/base/base/app/javascript/packs/server-bundle.js +8 -0
  106. data/lib/generators/react_on_rails/templates/base/base/app/views/layouts/hello_world.html.erb +2 -1
  107. data/lib/generators/react_on_rails/templates/base/base/babel.config.js.tt +32 -0
  108. data/lib/generators/react_on_rails/templates/base/base/config/initializers/react_on_rails.rb +20 -4
  109. data/lib/generators/react_on_rails/templates/base/base/config/shakapacker.yml +62 -0
  110. data/lib/generators/react_on_rails/templates/base/base/config/webpack/clientWebpackConfig.js.tt +17 -0
  111. data/lib/generators/react_on_rails/templates/base/base/config/webpack/commonWebpackConfig.js.tt +17 -0
  112. data/lib/generators/react_on_rails/templates/base/base/config/webpack/development.js.tt +25 -0
  113. data/lib/generators/react_on_rails/templates/base/base/config/webpack/production.js.tt +9 -0
  114. data/lib/generators/react_on_rails/templates/base/base/config/webpack/serverWebpackConfig.js.tt +117 -0
  115. data/lib/generators/react_on_rails/templates/base/base/config/webpack/test.js.tt +9 -0
  116. data/lib/generators/react_on_rails/templates/base/base/config/webpack/webpack.config.js.tt +15 -0
  117. data/lib/generators/react_on_rails/templates/base/base/config/webpack/webpackConfig.js.tt +36 -0
  118. data/lib/generators/react_on_rails/templates/dev_tests/spec/rails_helper.rb +8 -2
  119. data/lib/generators/react_on_rails/templates/dev_tests/spec/simplecov_helper.rb +1 -1
  120. data/lib/generators/react_on_rails/templates/dev_tests/spec/{features → system}/hello_world_spec.rb +2 -2
  121. data/lib/generators/react_on_rails/templates/redux/base/app/javascript/bundles/HelloWorld/components/HelloWorld.jsx +6 -9
  122. data/lib/generators/react_on_rails/templates/redux/base/app/javascript/bundles/HelloWorld/store/helloWorldStore.js +1 -3
  123. data/lib/react_on_rails/configuration.rb +198 -145
  124. data/lib/react_on_rails/error.rb +2 -0
  125. data/lib/react_on_rails/git_utils.rb +5 -3
  126. data/lib/react_on_rails/{react_on_rails_helper.rb → helper.rb} +201 -190
  127. data/lib/react_on_rails/json_output.rb +1 -1
  128. data/lib/react_on_rails/json_parse_error.rb +28 -0
  129. data/lib/react_on_rails/locales/base.rb +169 -0
  130. data/lib/react_on_rails/locales/to_js.rb +33 -0
  131. data/lib/react_on_rails/locales/to_json.rb +23 -0
  132. data/lib/react_on_rails/packs_generator.rb +234 -0
  133. data/lib/react_on_rails/prerender_error.rb +35 -27
  134. data/lib/react_on_rails/react_component/render_options.rb +64 -9
  135. data/lib/react_on_rails/server_rendering_js_code.rb +55 -0
  136. data/lib/react_on_rails/server_rendering_pool/ruby_embedded_java_script.rb +126 -76
  137. data/lib/react_on_rails/server_rendering_pool.rb +0 -1
  138. data/lib/react_on_rails/test_helper/ensure_assets_compiled.rb +9 -8
  139. data/lib/react_on_rails/test_helper/webpack_assets_compiler.rb +17 -0
  140. data/lib/react_on_rails/test_helper/webpack_assets_status_checker.rb +13 -12
  141. data/lib/react_on_rails/test_helper.rb +24 -3
  142. data/lib/react_on_rails/utils.rb +94 -25
  143. data/lib/react_on_rails/version.rb +1 -1
  144. data/lib/react_on_rails/version_checker.rb +5 -1
  145. data/lib/react_on_rails/version_syntax_converter.rb +14 -12
  146. data/lib/react_on_rails/webpacker_utils.rb +105 -5
  147. data/lib/react_on_rails.rb +8 -2
  148. data/lib/tasks/assets.rake +28 -60
  149. data/lib/tasks/generate_packs.rake +11 -0
  150. data/lib/tasks/locale.rake +5 -4
  151. data/package-scripts.yml +49 -0
  152. data/package.json +52 -47
  153. data/rakelib/docker.rake +0 -5
  154. data/rakelib/dummy_apps.rake +5 -8
  155. data/rakelib/example_type.rb +12 -3
  156. data/rakelib/examples.rake +5 -4
  157. data/rakelib/lint.rake +5 -16
  158. data/rakelib/node_package.rake +2 -2
  159. data/rakelib/release.rake +37 -23
  160. data/rakelib/run_rspec.rake +16 -44
  161. data/rakelib/task_helpers.rb +16 -4
  162. data/react_on_rails.gemspec +6 -22
  163. data/tsconfig.json +14 -0
  164. data/webpackConfigLoader.js +5 -4
  165. data/yarn.lock +5935 -3106
  166. metadata +122 -272
  167. data/Gemfile.rails32 +0 -74
  168. data/docs/additional-reading/asset-pipeline.md +0 -20
  169. data/docs/additional-reading/babel.md +0 -5
  170. data/docs/additional-reading/caching-and-performance.md +0 -4
  171. data/docs/additional-reading/heroku-deployment.md +0 -92
  172. data/docs/additional-reading/hot-reloading-rails-development.md +0 -57
  173. data/docs/additional-reading/node-server-rendering.md +0 -5
  174. data/docs/additional-reading/rails-engine-integration.md +0 -34
  175. data/docs/additional-reading/react-helmet.md +0 -80
  176. data/docs/additional-reading/react-router.md +0 -113
  177. data/docs/additional-reading/recommended-project-structure.md +0 -49
  178. data/docs/additional-reading/rspec-configuration.md +0 -56
  179. data/docs/additional-reading/webpack-dev-server.md +0 -15
  180. data/docs/api/ruby-api-hot-reload-view-helpers.md +0 -44
  181. data/docs/api/ruby-api.md +0 -8
  182. data/docs/basics/configuration.md +0 -163
  183. data/docs/basics/i18n.md +0 -77
  184. data/docs/tutorial.md +0 -220
  185. data/lib/generators/react_on_rails/templates/base/base/Procfile.dev-server +0 -12
  186. data/lib/react_on_rails/assets_precompile.rb +0 -150
  187. data/lib/react_on_rails/locales_to_js.rb +0 -134
  188. data/ruby-lint.yml +0 -25
  189. /data/docs/{additional-reading → additional-details}/updating-dependencies.md +0 -0
  190. /data/docs/{additional-reading → deployment}/elastic-beanstalk.md +0 -0
  191. /data/docs/{additional-reading → javascript}/angular-js-integration-migration.md +0 -0
  192. /data/docs/{additional-reading → javascript}/capistrano-deployment.md +0 -0
  193. /data/docs/{additional-reading → javascript}/foreman-issues.md +0 -0
  194. /data/docs/{additional-reading → javascript}/node-dependencies-and-npm.md +0 -0
  195. /data/docs/{additional-reading → javascript}/react-and-redux.md +0 -0
  196. /data/docs/{additional-reading → javascript}/troubleshooting-when-using-webpacker.md +0 -0
  197. /data/docs/{additional-reading → javascript}/webpack-v1-notes.md +0 -0
  198. /data/docs/{coding-style → misc}/style.md +0 -0
  199. /data/docs/{additional-reading → misc}/tips.md +0 -0
@@ -1,163 +0,0 @@
1
- Here is the full set of config options. This file is `/config/initializers/react_on_rails.rb`
2
-
3
- ```ruby
4
- # frozen_string_literal: true
5
-
6
- # NOTE: you typically will leave the commented out configurations set to their defaults.
7
- # Thus, you only need to pay careful attention to the non-commented settings in this file.
8
- ReactOnRails.configure do |config|
9
- # `trace`: General debugging flag.
10
- # The default is true for development, off otherwise.
11
- # With true, you get detailed logs of rendering and stack traces if you call setTimout,
12
- # setInterval, clearTimout when server rendering.
13
- config.trace = Rails.env.development?
14
-
15
-
16
- # defaults to "" (top level)
17
- #
18
- config.node_modules_location = ""
19
-
20
- # This configures the script to run to build the production assets by webpack. Set this to nil
21
- # if you don't want react_on_rails building this file for you.
22
- config.build_production_command = "RAILS_ENV=production bin/webpack"
23
-
24
- ################################################################################
25
- ################################################################################
26
- # TEST CONFIGURATION OPTIONS
27
- # Below options are used with the use of this test helper:
28
- # ReactOnRails::TestHelper.configure_rspec_to_compile_assets(config)
29
- ################################################################################
30
-
31
- # If you are using this in your spec_helper.rb (or rails_helper.rb):
32
- #
33
- # ReactOnRails::TestHelper.configure_rspec_to_compile_assets(config)
34
- #
35
- # with rspec then this controls what yarn command is run
36
- # to automatically refresh your webpack assets on every test run.
37
- #
38
- config.build_test_command = "RAILS_ENV=test bin/webpack"
39
-
40
- # Directory where your generated assets go. All generated assets must go to the same directory.
41
- # If you are using webpacker, this value will come from your config/webpacker.yml file.
42
- # This is the default in webpacker.yml:
43
- # public_output_path: packs-test
44
- # which means files in /public/packs-test
45
- #
46
- # Alternately, you may configure this. It is relative to your Rails root directory.
47
- # A custom, non-webpacker, config might use something like:
48
- #
49
- # config.generated_assets_dir = File.join(%w[public webpack], Rails.env)
50
- # This setting should not be used if using webpacker.
51
-
52
- # The test helper needs to know where your JavaScript files exist. The default is configured
53
- # by your config/webpacker.yml soure_path:
54
- # source_path: app/javascript
55
- #
56
- # If you have a non-default `node_modules_location`, that is assumed to be the location of your source
57
- # files.
58
-
59
- # Define the files we need to check for webpack compilation when running tests.
60
- # The default is `%w( manifest.json )` as will be sufficient for most webpacker builds.
61
- #
62
- config.webpack_generated_files = %w( manifest.json )
63
-
64
- # You can optionally add values to your rails_context. See example below for RenderingExtension
65
- # config.rendering_extension = RenderingExtension
66
-
67
- ################################################################################
68
- ################################################################################
69
- # SERVER RENDERING OPTIONS
70
- ################################################################################
71
- # This is the file used for server rendering of React when using `(prerender: true)`
72
- # If you are never using server rendering, you should set this to "".
73
- # Note, there is only one server bundle, unlike JavaScript where you want to minimize the size
74
- # of the JS sent to the client. For the server rendering, React on Rails creates a pool of
75
- # JavaScript execution instances which should handle any component requested.
76
- #
77
- # While you may configure this to be the same as your client bundle file, this file is typically
78
- # different.
79
- #
80
- config.server_bundle_js_file = "server-bundle.js"
81
-
82
- # If set to true, this forces Rails to reload the server bundle if it is modified
83
- # Default value is Rails.env.development?
84
- #
85
- config.development_mode = Rails.env.development?
86
-
87
- # For server rendering so that it replays in the browser console.
88
- # This can be set to false so that server side messages are not displayed in the browser.
89
- # Default is true. Be cautious about turning this off.
90
- # Default value is true
91
- #
92
- config.replay_console = true
93
-
94
- # Default is true. Logs server rendering messages to Rails.logger.info. If false, you'll only
95
- # see the server rendering messages in the browser console.
96
- #
97
- config.logging_on_server = true
98
-
99
- # Default is to false to NOT raise exception on server if the JS code throws.
100
- # Reason is that it's easier to debug this when you get the error over to the client.
101
- #
102
- config.raise_on_prerender_error = false
103
-
104
- ################################################################################
105
- # Server Renderer Configuration for ExecJS
106
- ################################################################################
107
- # The default server rendering is ExecJS, probably using the mini_racer gem
108
- # If you wish to use an alternative Node server rendering for higher performance,
109
- # contact justin@shakacode.com for details.
110
- #
111
- # For ExecJS:
112
- # You can configure your pool of JS virtual machines and specify where it should load code:
113
- # On MRI, use `mini_racer` for the best performance
114
- # (see [discussion](https://github.com/reactjs/react-rails/pull/290))
115
- # On MRI, you'll get a deadlock with `pool_size` > 1
116
- # If you're using JRuby, you can increase `pool_size` to have real multi-threaded rendering.
117
- config.server_renderer_pool_size = 1 # increase if you're on JRuby
118
- config.server_renderer_timeout = 20 # seconds
119
-
120
- ################################################################################
121
- # I18N OPTIONS
122
- ################################################################################
123
- # Replace the following line to the location where you keep translation.js & default.js for use
124
- # by the npm packages react-intl. Be sure this directory exists!
125
- # config.i18n_dir = Rails.root.join("client", "app", "libs", "i18n")
126
- # If not using the i18n feature, then leave this section commented out or set the value
127
- # of config.i18n_dir to nil.
128
- #
129
- # Replace the following line to the location where you keep your client i18n yml files
130
- # that will source for automatic generation on translations.js & default.js
131
- # By default(without this option) all yaml files from Rails.root.join("config", "locales")
132
- # and installed gems are loaded
133
- config.i18n_yml_dir = Rails.root.join("config", "locales", "client")
134
-
135
- ################################################################################
136
- ################################################################################
137
- # CLIENT RENDERING OPTIONS
138
- # Below options can be overriden by passing options to the react_on_rails
139
- # `render_component` view helper method.
140
- ################################################################################
141
- # default is false
142
- config.prerender = false
143
- end
144
-
145
- ```
146
-
147
- Example of a RenderingExtension for custom values in the `rails_context`:
148
-
149
- ```ruby
150
- module RenderingExtension
151
-
152
- # Return a Hash that contains custom values from the view context that will get merged with
153
- # the standard rails_context values and passed to all calls to generator functions used by the
154
- # react_component and redux_store view helpers
155
- def self.custom_context(view_context)
156
- {
157
- somethingUseful: view_context.session[:something_useful]
158
- }
159
- end
160
- end
161
- ```
162
-
163
-
data/docs/basics/i18n.md DELETED
@@ -1,77 +0,0 @@
1
- # How to add I18n
2
-
3
- Here's a summary of adding the I18n functionality.
4
-
5
- You can refer to [react-webpack-rails-tutorial](https://github.com/shakacode/react-webpack-rails-tutorial) and [PR #340](https://github.com/shakacode/react-webpack-rails-tutorial/pull/340), [commmited](https://github.com/shakacode/react-webpack-rails-tutorial/commit/ef369ed9d922aea5116ca7e50208169fd7831389) for a complete example.
6
-
7
- 1. Add `react-intl` & `intl` to `client/package.json`, and remember to `bundle && yarn install`.
8
-
9
- ```js
10
- "dependencies": {
11
- ...
12
- "intl": "^1.2.5",
13
- "react-intl": "^2.1.5",
14
- ...
15
- }
16
- ```
17
-
18
- 2. Add `config.i18n_dir` in `config/initializers/react_on_rails.rb`
19
-
20
- `react-intl` requires locale files in json format. React on Rails will generate `translations.js` & `default.js` automatically after you configured your `config.i18n_dir` in `config/initializers/react_on_rails.rb`.
21
-
22
- ```ruby
23
- # Replace the following line to the location where you keep translation.js & default.js.
24
- config.i18n_dir = Rails.root.join("PATH_TO", "YOUR_JS_I18N_FOLDER")
25
- ```
26
-
27
- Optionally you can also set `config.i18n_yml_dir` if you do not what to use all the locale files from rails.
28
- ```ruby
29
- # Replace the following line to the location where you keep your client i18n yml files
30
- # By default(without this option), all yaml files from Rails.root.join("config", "locales") and installed gems are loaded
31
- config.i18n_yml_dir = Rails.root.join("PATH_TO", "YOUR_YAML_I18N_FOLDER")
32
- ```
33
-
34
- `translations.js`: All your locales in json format.
35
- `default.js`: Default settings in json format.
36
-
37
- 3. Add `translations.js` and `default.js` to your `.gitignore` and `.eslintignore`.
38
-
39
- 4. Javascript locale files must be generated before `yarn build`.
40
-
41
- Once you setup `config.i18n_dir` as in the previous step, react_on_rails will automatically do this for testing (if using the `ReactOnRails::TestHelper.configure_rspec_to_compile_assets` and for production deployments if using the [default precompile rake hook](../additional-reading/heroku-deployment.md). For development, you should adjust your startup scripts (Procfiles) so that they run **`bundle exec rake react_on_rails:locale`** before running any webpack watch process (`yarn run build:development`). You may need to configure your CI to run **`bundle exec rake react_on_rails:locale`** before any webpack process if you are not using the React on Rails test helper. Note, if you are try to lint before running tests, and you are depending on the test helper to build your locales, your linting will fail because the translations won't be built yet. The fix is either to 1) run the rake task to build the translations before running the lint command or 2) to run the tests first.
42
-
43
- 5. In React, you need to initialize `react-intl`, and set parameters for it.
44
-
45
- ```js
46
- ...
47
- import { addLocaleData } from 'react-intl';
48
- import en from 'react-intl/locale-data/en';
49
- import de from 'react-intl/locale-data/de';
50
- import { translations } from 'path_to/i18n/translations';
51
- import { defaultLocale } from 'path_to/i18n/default';
52
- ...
53
- // Initizalize all locales for react-intl.
54
- addLocaleData([...en, ...de]);
55
- ...
56
- // set locale and messages for IntlProvider.
57
- const locale = method_to_get_current_locale() || defaultLocale;
58
- const messages = translations[locale];
59
- ...
60
- return (
61
- <IntlProvider locale={locale} key={locale} messages={messages}>
62
- <CommentScreen {...{ actions, data }} />
63
- </IntlProvider>
64
- )
65
- ```
66
- ```js
67
- // In your component.
68
- import { defaultMessages } from 'path_to/i18n/default';
69
- ...
70
- return (
71
- { formatMessage(defaultMessages.yourLocaleKeyInCamelCase) }
72
- )
73
- ```
74
-
75
- # Notes
76
-
77
- * See [Support for Rails' i18n pluralization #1000](https://github.com/shakacode/react_on_rails/issues/1000) for a discussion of issues around pluralization.
data/docs/tutorial.md DELETED
@@ -1,220 +0,0 @@
1
- # React on Rails Basic Tutorial
2
-
3
- This tutorial guides you through setting up a new or existing Rails app with **React on Rails**, demonstrating Rails + React + Redux + Server Rendering. It is updated to 10.0.2.
4
-
5
- After finishing this tutorial you will get an application that can do the following (live on Heroku):
6
-
7
- ![example](https://cloud.githubusercontent.com/assets/371302/17368567/111cc722-596b-11e6-9b72-ac5967a60e42.gif)
8
-
9
- You can find here:
10
- * [Source code for this app in PR, using the --redux option](https://github.com/shakacode/react_on_rails-test-new-redux-generation/pull/17) and [for Heroku](https://github.com/shakacode/react_on_rails-test-new-redux-generation/pull/18).
11
- * [Live on Heroku](https://react-on-rails-redux-gen-8-0-0.herokuapp.com/)
12
-
13
- By the time you read this, the latest may have changed. Be sure to check the versions here:
14
-
15
- * https://rubygems.org/gems/react_on_rails
16
- * https://www.npmjs.com/package/react-on-rails
17
-
18
- _Note: some of the screen images below show the "npm" command. react_on_rails 6.6.0 and greater uses `yarn`._
19
-
20
- ## Setting up the environment
21
-
22
- Trying out **React on Rails** is super easy, so long as you have the basic prerequisites. This includes the basics for Rails 5.x and node version 6+. I recommend `rvm` and `nvm` to install Ruby and Node, and [brew](https://brew.sh/) to install [yarn](https://yarnpkg.com/en/docs/install#mac-tab). Rails can be installed as an ordinary gem.
23
-
24
- ```
25
- nvm install node # download and install latest stable Node
26
- nvm alias default node # make it default version
27
- nvm list # check
28
-
29
- brew install yarn # you can use other installer if desired
30
-
31
- rvm install 2.4.1 # download and install latest stable Ruby (update to exact version)
32
- rvm use 2.4.1 --default # use it and make it default
33
- rvm list # check
34
-
35
- gem install rails # download and install latest stable Rails
36
- gem install foreman # download and install Foreman
37
- ```
38
-
39
- Then we need to create a fresh Rails application with webpacker react support as following.
40
-
41
- First be sure to run `rails -v` and check you are using Rails 5.1.3 or above. If you are using an older version of Rails, you'll need to install webpacker with react per the instructions [here](https://github.com/rails/webpacker).
42
-
43
- ```
44
- cd <directory where you want to create your new Rails app>
45
-
46
- # any name you like for the rails app
47
- rails new test-react-on-rails --webpack=react
48
-
49
- cd test-react-on-rails
50
- ```
51
-
52
- Note: if you are installing React On Rails in an existing app or an app that uses Rails pre 5.1.3, you will need to run these two commands as well:
53
-
54
- ```
55
- bundle exec rails webpacker:install
56
- bundle exec rails webpacker:install:react
57
- ```
58
-
59
- Add the **React On Rails** gem to your Gemfile:
60
-
61
- ```
62
- gem 'react_on_rails', '10.0.2' # prefer exact gem version to match npm version
63
- ```
64
-
65
- Note: Latest released React On Rails version is considered stable. Please use the latest version to ensure you get all the security patches and the best support.
66
-
67
- Run `bundle` and commit the git repository (or `rails generate` will not work properly)
68
-
69
-
70
- ```
71
- bundle
72
-
73
- # Here are git commands to make a new git repo and commit everything.
74
- # Newer versions of Rails create the git repo by default.
75
- git add -A
76
- git commit -m "Initial commit"
77
- ```
78
-
79
- Install React on Rails: `rails generate react_on_rails:install` or `rails generate react_on_rails:install --redux`. You need to first git commit your files before running the generator, or else it will generate an error.
80
-
81
- ```
82
- rails generate react_on_rails:install
83
- bundle && yarn
84
- ```
85
-
86
- and then run server with
87
-
88
- ```
89
- foreman start -f Procfile.dev
90
- ```
91
-
92
- Visit http://localhost:3000/hello_world and see your **React On Rails** app running!
93
- Note, foreman defaults to PORT 5000 unless you set the value of PORT in your environment or in the Procfile.
94
-
95
- ### Custom IP & PORT setup (Cloud9 example)
96
-
97
- In case you are running some custom setup with different IP or PORT you should also edit Procfile.dev. For example to be able to run on free Cloud9 IDE we are putting IP 0.0.0.0 and PORT 8080. The default generated file `Procfile.dev` uses `-p 3000`.
98
-
99
- ``` Procfile.dev
100
- web: rails s -p 8080 -b 0.0.0.0
101
- ```
102
-
103
- Then visit https://your-shared-addr.c9users.io:8080/hello_world
104
-
105
-
106
- ## RubyMine
107
-
108
- It's super important to exclude certain directories from RubyMine or else it will slow to a crawl as it tries to parse all the npm files.
109
-
110
- * Generated files, per the settings in your `config/webpacker.yml`, which default to `public/packs` and `public/packs-test`
111
- * `node_modules`
112
-
113
- ## Deploying to Heroku
114
-
115
- ### Create Your Heroku App
116
- *Assuming you can login to heroku.com and have logged into to your shell for heroku.*
117
-
118
- 1. Visit https://dashboard.heroku.com/new and create an app, say named `my-name-react-on-rails`:
119
-
120
- ![06](https://cloud.githubusercontent.com/assets/20628911/17465014/1f29bf3c-5cf4-11e6-869f-4215987ae854.png)
121
-
122
- Run this command that looks like this from your new heroku app
123
-
124
- heroku git:remote -a my-name-react-on-rails
125
-
126
- Set heroku to use multiple buildpacks:
127
-
128
- heroku buildpacks:set heroku/ruby
129
- heroku buildpacks:add --index 1 heroku/nodejs
130
-
131
-
132
- ### Swap out sqlite for postgres by doing the following:
133
-
134
- 1. Delete the line with `sqlite` and replace it with:
135
-
136
- ```ruby
137
- gem 'pg'
138
- ```
139
-
140
- ![07](https://cloud.githubusercontent.com/assets/20628911/17465015/1f2f4042-5cf4-11e6-8287-2fb077550809.png)
141
-
142
-
143
- 2. Replace your `database.yml` file with this (assuming your app name is "ror").
144
-
145
- ```yml
146
- default: &default
147
- adapter: postgresql
148
- username:
149
- password:
150
- host: localhost
151
-
152
- development:
153
- <<: *default
154
- database: ror_development
155
-
156
- # Warning: The database defined as "test" will be erased and
157
- # re-generated from your development database when you run "rake".
158
- # Do not set this db to the same as development or production.
159
- test:
160
- <<: *default
161
- database: ror_test
162
-
163
- production:
164
- <<: *default
165
- database: ror_production
166
- ```
167
-
168
- Then you need to setup postgres so you can run locally:
169
-
170
- ```
171
- bundle
172
- rake db:setup
173
- rake db:migrate
174
- ```
175
-
176
- ![08](https://cloud.githubusercontent.com/assets/20628911/17465016/1f3559f0-5cf4-11e6-8ab4-c5572e4644a5.png)
177
-
178
- I'd recommend adding this line to the top of your `routes.rb`. That way, your root page will go to the Hello World page for React On Rails.
179
-
180
- ```ruby
181
- root "hello_world#index"
182
- ```
183
-
184
- ![09](https://cloud.githubusercontent.com/assets/20628911/17465018/1f3b685e-5cf4-11e6-93f8-105fc48517d0.png)
185
-
186
- Next, configure your app for Puma, per the [instructions on Heroku](https://devcenter.heroku.com/articles/deploying-rails-applications-with-the-puma-web-server).
187
-
188
- `Procfile`
189
- ```
190
- web: bundle exec puma -C config/puma.rb
191
- ```
192
-
193
- `config/puma.rb`
194
- ```rb
195
- workers Integer(ENV['WEB_CONCURRENCY'] || 2)
196
- threads_count = Integer(ENV['RAILS_MAX_THREADS'] || 5)
197
- threads threads_count, threads_count
198
-
199
- preload_app!
200
-
201
- rackup DefaultRackup
202
- port ENV['PORT'] || 3000
203
- environment ENV['RACK_ENV'] || 'development'
204
-
205
- on_worker_boot do
206
- # Worker specific setup for Rails 4.1+
207
- # See: https://devcenter.heroku.com/articles/deploying-rails-applications-with-the-puma-web-server#on-worker-boot
208
- ActiveRecord::Base.establish_connection
209
- end
210
- ```
211
-
212
- Then after all changes are done don't forget to commit them with git and finally you can push your app to Heroku!
213
-
214
- ```
215
- git add -A
216
- git commit -m "Latest changes"
217
- git push heroku master
218
- ```
219
-
220
- Feedback is greatly appreciated! As are stars on github! If you want personalized help, don't hesitate to get in touch with us at [contact@shakacode.com](mailto:contact@shakacode.com).
@@ -1,12 +0,0 @@
1
- # You can run these commands in separate shells instead of using foreman
2
- web: rails s -p 3000
3
-
4
- # Next line runs the webpack-dev-server
5
- # You can edit config/webpacker.yml to set HMR to true to see hot reloading.
6
- # Note, hot and live reloading don't work with the default generator setup on top of
7
- # the rails/webpacker Webpack config with server rendering.
8
- # If you have server rendering enabled, modify the call to bin/webpack-dev-server line
9
- # so you add `--inline=false` and then CSS is not inlined.
10
- # Otherwise, you will have an error. If you want HMR and Server Rendering, see
11
- # the example in the https://github.com/shakacode/react-webpack-rails-tutorial
12
- client: sh -c 'rm -rf public/packs/* || true && bundle exec rake react_on_rails:locale && bin/webpack-dev-server'
@@ -1,150 +0,0 @@
1
- # frozen_string_literal: true
2
-
3
- module ReactOnRails
4
- class AssetsPrecompile
5
- class SymlinkTargetDoesNotExistException < StandardError
6
- end
7
-
8
- # Used by the rake task
9
- def default_asset_path
10
- dir = File.join(Rails.configuration.paths["public"].first,
11
- Rails.configuration.assets.prefix)
12
- Pathname.new(dir)
13
- end
14
-
15
- # assets_path should be a Pathname object
16
- def initialize(assets_path: nil,
17
- symlink_non_digested_assets_regex: nil,
18
- generated_assets_dir: nil)
19
- @assets_path = ReactOnRails::Utils.truthy_presence(assets_path) || default_asset_path
20
- @symlink_non_digested_assets_regex =
21
- ReactOnRails::Utils.truthy_presence(symlink_non_digested_assets_regex) ||
22
- ReactOnRails.configuration.symlink_non_digested_assets_regex
23
- @generated_assets_dir = ReactOnRails::Utils.truthy_presence(generated_assets_dir) ||
24
- ReactOnRails.configuration.generated_assets_dir
25
- end
26
-
27
- # target and symlink are relative to the assets directory
28
- def symlink_file(target, symlink)
29
- target_path = @assets_path.join(target)
30
- symlink_path = @assets_path.join(symlink)
31
-
32
- target_exists = File.exist?(target_path)
33
- raise SymlinkTargetDoesNotExistException, "Target Path was: #{target_path}" unless target_exists
34
-
35
- if symlink_and_points_to_existing_file?(symlink_path)
36
- puts "React On Rails: Digested version of #{symlink} already exists indicating #{target} did not change."
37
- return
38
- end
39
-
40
- if file_or_symlink_exists_at_path?(symlink_path)
41
- puts "React On Rails: Removing existing invalid symlink or file #{symlink_path}"
42
- FileUtils.remove_file(symlink_path, true)
43
- end
44
-
45
- # Might be like:
46
- # "images/5cf5db49df178f9357603f945752a1ef.png":
47
- # "images/5cf5db49df178f9357603f945752a1ef-033650e1d6193b70d59bb60e773f47b6d9aefdd56abc7cc.png"
48
- # need to cd to directory and then symlink
49
- target_sub_path, _divider, target_filename = target.rpartition("/")
50
- _symlink_sub_path, _divider, symlink_filename = symlink.rpartition("/")
51
- dest_path = File.join(@assets_path, target_sub_path)
52
-
53
- puts "React On Rails: Symlinking \"#{target}\" to \"#{symlink}\""
54
- FileUtils.chdir(dest_path) do
55
- File.symlink(target_filename, symlink_filename)
56
- end
57
- end
58
-
59
- def symlink_non_digested_assets
60
- # digest ==> means that the file has a unique sha so the browser will load a new copy.
61
- # Webpack's CSS extract-text-plugin copies digested asset files over to directory where we put
62
- # we deploy the webpack compiled JS file. Since Rails will deploy the image files in this
63
- # directory with a digest, then the files are essentially "double-digested" and the CSS
64
- # references from webpack's CSS would be invalid. The fix is to symlink the double-digested
65
- # file back to the original digested name, and make a similar symlink for the gz version.
66
- return unless @symlink_non_digested_assets_regex
67
- manifest_glob = Dir.glob(@assets_path.join(".sprockets-manifest-*.json")) +
68
- Dir.glob(@assets_path.join("manifest-*.json")) +
69
- Dir.glob(@assets_path.join("manifest.yml"))
70
- if manifest_glob.empty?
71
- puts "Warning: React On Rails: expected to find .sprockets-manifest-*.json, manifest-*.json "\
72
- "or manifest.yml at #{@assets_path}, but found none. Canceling symlinking tasks."
73
- return -1
74
- end
75
- manifest_path = take_most_recent_manifest_path(manifest_glob)
76
- manifest_file = File.new(manifest_path)
77
- manifest_data = if File.extname(manifest_file) == ".json"
78
- manifest_file_data = File.read(manifest_path)
79
- JSON.parse(manifest_file_data)["assets"]
80
- else
81
- YAML.safe_load(manifest_file)
82
- end
83
-
84
- # We realize that we're copying other Rails assets that match the regexp, but this just
85
- # means that we'd be exposing the original, undigested names.
86
- manifest_data.each do |original_filename, rails_digested_filename|
87
- # TODO: we should remove any original_filename that is NOT in the webpack deploy folder.
88
- next unless original_filename =~ @symlink_non_digested_assets_regex
89
- # We're symlinking from the digested filename back to the original filename which has
90
- # already been symlinked by Webpack
91
- symlink_file(rails_digested_filename, original_filename)
92
-
93
- # We want the gz ones as well if they exist
94
- if File.exist?(@assets_path.join("#{rails_digested_filename}.gz"))
95
- symlink_file("#{rails_digested_filename}.gz", "#{original_filename}.gz")
96
- end
97
- end
98
- end
99
-
100
- def delete_broken_symlinks
101
- Dir.glob(@assets_path.join("*")).each do |filename|
102
- next unless File.lstat(filename).symlink?
103
- begin
104
- target = File.readlink(filename)
105
- rescue StandardError
106
- puts "React on Rails: Warning: your platform doesn't support File::readlink method." \
107
- "Skipping broken link check."
108
- break
109
- end
110
- path = Pathname.new(File.dirname(filename))
111
- target_path = path.join(target)
112
- unless File.exist?(target_path)
113
- puts "React on Rails: Deleting broken link: #{filename}"
114
- File.delete(filename)
115
- end
116
- end
117
- end
118
-
119
- def clobber
120
- dir = Rails.root.join(@generated_assets_dir)
121
- if dir.present? && File.directory?(dir)
122
- puts "Deleting files in directory #{dir}"
123
- FileUtils.rm_r(Dir.glob(Rails.root.join("#{@generated_assets_dir}/*")))
124
- else
125
- puts "Could not find generated_assets_dir #{dir} defined in react_on_rails initializer: "
126
- end
127
- end
128
-
129
- private
130
-
131
- def take_most_recent_manifest_path(manifest_glob)
132
- manifest_glob.max_by { |name| File.mtime(name) }
133
- end
134
-
135
- def symlink_and_points_to_existing_file?(symlink_path)
136
- # File.exist?(symlink_path) will check the file the sym is pointing to is existing
137
- # File.lstat(symlink_path).symlink? confirms that this is a symlink
138
- File.exist?(symlink_path) && File.lstat(symlink_path).symlink?
139
- end
140
-
141
- def file_or_symlink_exists_at_path?(path)
142
- # We use lstat and not stat, we we don't want to visit the file that the symlink maybe
143
- # pointing to. We can't use File.exist?, as that would check the file pointed at by the symlink.
144
- File.lstat(path)
145
- true
146
- rescue StandardError
147
- false
148
- end
149
- end
150
- end