react_on_rails 8.0.2 → 9.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (84) hide show
  1. checksums.yaml +4 -4
  2. data/.eslintignore +2 -0
  3. data/.gitignore +2 -2
  4. data/.rubocop.yml +5 -0
  5. data/.travis.yml +12 -1
  6. data/CHANGELOG.md +185 -6
  7. data/CONTRIBUTING.md +2 -2
  8. data/Gemfile +6 -2
  9. data/Gemfile.rails32 +74 -0
  10. data/KUDOS.md +5 -0
  11. data/README.md +200 -84
  12. data/Rakefile +11 -1
  13. data/app/helpers/react_on_rails_helper.rb +1 -1
  14. data/docs/additional-reading/asset-pipeline.md +20 -0
  15. data/docs/additional-reading/hot-reloading-rails-development.md +4 -75
  16. data/docs/additional-reading/node-server-rendering.md +2 -166
  17. data/docs/additional-reading/rails-assets-relative-paths.md +3 -1
  18. data/docs/additional-reading/rails-engine-integration.md +1 -1
  19. data/docs/additional-reading/rspec-configuration.md +7 -24
  20. data/docs/api/ruby-api-hot-reload-view-helpers.md +2 -2
  21. data/{lib/generators/react_on_rails/templates/base/base/config/initializers/react_on_rails.rb.tt → docs/basics/configuration.md} +80 -41
  22. data/docs/basics/generator.md +0 -5
  23. data/docs/basics/installation-overview.md +6 -5
  24. data/docs/contributor-info/generator-testing.md +0 -9
  25. data/docs/tutorial.md +31 -34
  26. data/lib/generators/USAGE +0 -4
  27. data/lib/generators/react_on_rails/base_generator.rb +43 -76
  28. data/lib/generators/react_on_rails/dev_tests_generator.rb +7 -5
  29. data/lib/generators/react_on_rails/install_generator.rb +5 -10
  30. data/lib/generators/react_on_rails/react_no_redux_generator.rb +10 -9
  31. data/lib/generators/react_on_rails/react_with_redux_generator.rb +27 -17
  32. data/lib/generators/react_on_rails/templates/.eslintrc +2 -0
  33. data/lib/generators/react_on_rails/templates/base/base/Procfile.dev +4 -0
  34. data/lib/generators/react_on_rails/templates/base/base/Procfile.dev-server +5 -0
  35. data/lib/generators/react_on_rails/templates/base/base/{client/app → app/javascript}/bundles/HelloWorld/components/HelloWorld.jsx +1 -2
  36. data/lib/generators/react_on_rails/templates/base/base/app/views/hello_world/index.html.erb.tt +0 -1
  37. data/lib/generators/react_on_rails/templates/base/base/app/views/layouts/hello_world.html.erb +12 -0
  38. data/lib/generators/react_on_rails/templates/base/base/config/initializers/react_on_rails.rb +41 -0
  39. data/lib/generators/react_on_rails/templates/dev_tests/.eslintrc +25 -0
  40. data/lib/generators/react_on_rails/templates/dev_tests/spec/rails_helper.rb +0 -1
  41. data/lib/generators/react_on_rails/templates/dev_tests/spec/simplecov_helper.rb +1 -1
  42. data/lib/generators/react_on_rails/templates/dev_tests/spec/spec_helper.rb +2 -0
  43. data/lib/generators/react_on_rails/templates/redux/base/{client/app → app/javascript}/bundles/HelloWorld/startup/HelloWorldApp.jsx +1 -3
  44. data/lib/react_on_rails/configuration.rb +21 -16
  45. data/lib/react_on_rails/git_utils.rb +9 -3
  46. data/lib/react_on_rails/prerender_error.rb +15 -9
  47. data/lib/react_on_rails/server_rendering_pool/exec.rb +21 -8
  48. data/lib/react_on_rails/test_helper/ensure_assets_compiled.rb +1 -1
  49. data/lib/react_on_rails/test_helper/webpack_assets_compiler.rb +3 -1
  50. data/lib/react_on_rails/test_helper/webpack_assets_status_checker.rb +12 -8
  51. data/lib/react_on_rails/test_helper.rb +7 -6
  52. data/lib/react_on_rails/utils.rb +77 -16
  53. data/lib/react_on_rails/version.rb +1 -1
  54. data/lib/react_on_rails/version_checker.rb +2 -1
  55. data/lib/tasks/assets.rake +12 -4
  56. data/package.json +25 -21
  57. data/rakelib/dummy_apps.rake +9 -0
  58. data/rakelib/example_type.rb +4 -70
  59. data/rakelib/examples.rake +5 -55
  60. data/rakelib/node_package.rake +1 -0
  61. data/rakelib/release.rake +9 -1
  62. data/rakelib/run_rspec.rake +24 -5
  63. data/react_on_rails.gemspec +2 -1
  64. data/webpackConfigLoader.js +45 -72
  65. data/yarn.lock +638 -252
  66. metadata +36 -26
  67. data/lib/generators/react_on_rails/node_generator.rb +0 -24
  68. data/lib/generators/react_on_rails/templates/base/base/Procfile.dev.tt +0 -2
  69. data/lib/generators/react_on_rails/templates/base/base/app/views/layouts/hello_world.html.erb.tt +0 -15
  70. data/lib/generators/react_on_rails/templates/base/base/client/.babelrc +0 -3
  71. data/lib/generators/react_on_rails/templates/base/base/client/REACT_ON_RAILS_CLIENT_README.md +0 -9
  72. data/lib/generators/react_on_rails/templates/base/base/client/package.json.tt +0 -36
  73. data/lib/generators/react_on_rails/templates/base/base/client/webpack.config.js +0 -77
  74. data/lib/generators/react_on_rails/templates/base/base/config/webpacker_lite.yml +0 -27
  75. data/lib/generators/react_on_rails/templates/base/base/package.json.tt +0 -8
  76. data/lib/generators/react_on_rails/templates/node/base/client/node/package.json +0 -10
  77. data/lib/generators/react_on_rails/templates/node/base/client/node/server.js +0 -105
  78. /data/lib/generators/react_on_rails/templates/base/base/{client/app/bundles/HelloWorld/startup/registration.jsx.tt → app/javascript/packs/registration.js.tt} +0 -0
  79. /data/lib/generators/react_on_rails/templates/redux/base/{client/app/bundles/HelloWorld/actions/helloWorldActionCreators.jsx → app/javascript/bundles/HelloWorld/actions/helloWorldActionCreators.js} +0 -0
  80. /data/lib/generators/react_on_rails/templates/redux/base/{client/app → app/javascript}/bundles/HelloWorld/components/HelloWorld.jsx +0 -0
  81. /data/lib/generators/react_on_rails/templates/redux/base/{client/app/bundles/HelloWorld/constants/helloWorldConstants.jsx → app/javascript/bundles/HelloWorld/constants/helloWorldConstants.js} +0 -0
  82. /data/lib/generators/react_on_rails/templates/redux/base/{client/app/bundles/HelloWorld/containers/HelloWorldContainer.jsx → app/javascript/bundles/HelloWorld/containers/HelloWorldContainer.js} +0 -0
  83. /data/lib/generators/react_on_rails/templates/redux/base/{client/app/bundles/HelloWorld/reducers/helloWorldReducer.jsx → app/javascript/bundles/HelloWorld/reducers/helloWorldReducer.js} +0 -0
  84. /data/lib/generators/react_on_rails/templates/redux/base/{client/app/bundles/HelloWorld/store/helloWorldStore.jsx → app/javascript/bundles/HelloWorld/store/helloWorldStore.js} +0 -0
data/docs/tutorial.md CHANGED
@@ -1,6 +1,9 @@
1
1
  # React on Rails Basic Tutorial
2
2
 
3
- This tutorial setups up a new Rails app with **React on Rails**, demonstrating Rails + React + Redux + Server Rendering. It is updated to 8.0.0.
3
+ * NOTE: Please be sure to use the BETA or RC versions of React on Rails until 9.0 is released.*
4
+
5
+
6
+ This tutorial setups up a new Rails app with **React on Rails**, demonstrating Rails + React + Redux + Server Rendering. It is updated to 9.0.0.
4
7
 
5
8
  After finishing this tutorial you will get an application that can do the following (live on Heroku):
6
9
 
@@ -28,65 +31,68 @@ nvm list # check
28
31
 
29
32
  brew install yarn # you can use other installer if desired
30
33
 
31
- rvm install 2.3.1 # download and install latest stable Ruby (update to exact version)
32
- rvm use 2.3.1 --default # use it and make it default
34
+ rvm install 2.4.1 # download and install latest stable Ruby (update to exact version)
35
+ rvm use 2.4.1 --default # use it and make it default
33
36
  rvm list # check
34
37
 
35
38
  gem install rails # download and install latest stable Rails
36
39
  gem install foreman # download and install Foreman
37
40
  ```
38
41
 
39
- Then we need to create a fresh Rails application as following:
42
+ Then we need to create a fresh Rails application with webpacker react support as following:
40
43
 
41
44
  ```
42
- cd <basic directory where you want to create your new Rails app>
45
+ cd <directory where you want to create your new Rails app>
43
46
 
44
- rails new test-react-on-rails # any name you like
47
+ # any name you like for the rails app
48
+ rails new test-react-on-rails --webpack=react
45
49
 
46
50
  cd test-react-on-rails
47
51
  ```
48
52
 
49
- ![01](https://cloud.githubusercontent.com/assets/20628911/17464917/3c29e55a-5cf2-11e6-8754-046ba3ee92d9.png)
53
+ Note: you can do the following two commands in an existing Rails app:
54
+
55
+ ```
56
+ bundle exec rails webpacker:install
57
+ bundle exec rails webpacker:install:react
58
+ ```
50
59
 
51
- Add **React On Rails** gem to your Gemfile (`vim Gemfile` or `nano Gemfile` or in IDE):
60
+
61
+
62
+ Add the **React On Rails** gem to your Gemfile:
52
63
 
53
64
  ```
54
- gem 'react_on_rails', '8.0.0' # use latest gem version, prefer exact version
65
+ gem 'react_on_rails', '9.0.0' # use latest gem version, prefer exact version
55
66
  ```
56
67
 
57
- ![02](https://cloud.githubusercontent.com/assets/20628911/17464919/3c2d74c2-5cf2-11e6-8704-a84958832fbb.png)
58
68
 
59
- put everything under git repository (or `rails generate` will not work properly)
69
+ Then run `bundle` and commit the git repository (or `rails generate` will not work properly)
70
+
60
71
 
61
72
  ```
62
- # Here are git commands to make a new git repo and commit everything
63
- git init
73
+ bundle
74
+
75
+ # Here are git commands to make a new git repo and commit everything.
76
+ # Newer versions of Rails create the git repo by default.
64
77
  git add -A
65
78
  git commit -m "Initial commit"
66
79
  ```
67
80
 
68
- update dependencies and generate empty app via `react_on_rails:install` or `react_on_rails:install --redux`. You need to first git commit your files before running the generator, or else it will generate an error.
81
+ Install React on Rails: `rails generator 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.
69
82
 
70
83
  ```
71
- bundle
72
84
  rails generate react_on_rails:install
73
85
  bundle && yarn
74
86
  ```
75
87
 
76
- ![03](https://cloud.githubusercontent.com/assets/20628911/17464918/3c2c1f00-5cf2-11e6-9525-7b2e15659e01.png)
77
-
78
88
  and then run server with
79
89
 
80
90
  ```
81
91
  foreman start -f Procfile.dev
82
92
  ```
83
93
 
84
- ![04](https://cloud.githubusercontent.com/assets/20628911/17464921/3c2fdb40-5cf2-11e6-9343-6afa53593a70.png)
85
-
86
- Visit http://localhost:5000/hello_world and see your **React On Rails** app running!
87
- Note, foreman defaults to PORT 5000 unless you set the value of PORT in your environment.
88
-
89
- ![05](https://cloud.githubusercontent.com/assets/20628911/17464920/3c2e8ae2-5cf2-11e6-9e30-5ec5f9e2cbc6.png)
94
+ Visit http://localhost:3000/hello_world and see your **React On Rails** app running!
95
+ Note, foreman defaults to PORT 5000 unless you set the value of PORT in your environment or in the Procfile.
90
96
 
91
97
  ### Custom IP & PORT setup (Cloud9 example)
92
98
 
@@ -103,8 +109,8 @@ Then visit https://your-shared-addr.c9users.io:8080/hello_world
103
109
 
104
110
  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.
105
111
 
106
- * `public/webpack` (or `app/assets/webpack` on older versions of react_on_rails)
107
- * `client/node_modules`
112
+ * Generated files, per the settings in your `config/webpacker.yml`, which default to `public/packs` and `public/packs-test`
113
+ * `node_modules`
108
114
 
109
115
  ## Deploying to Heroku
110
116
 
@@ -213,13 +219,4 @@ git commit -m "Latest changes"
213
219
  git push heroku master
214
220
  ```
215
221
 
216
- ![10](https://cloud.githubusercontent.com/assets/20628911/17465017/1f38fbaa-5cf4-11e6-8d86-a3d91e3878e0.png)
217
-
218
- ## Links
219
- These are updated for 8.0.0:
220
-
221
- * [PR for using the generator with the Redux option](https://github.com/shakacode/react_on_rails-test-new-redux-generation/pull/17)
222
- * [PR showing the changes to deploy to Heroku](https://github.com/shakacode/react_on_rails-test-new-redux-generation/pull/18)
223
- * [Live on Heroku](https://hello-react-on-rails-8-0-0.herokuapp.com/)
224
-
225
222
  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).
data/lib/generators/USAGE CHANGED
@@ -9,10 +9,6 @@ can pass the redux option if you'd like to have redux setup for you automaticall
9
9
  to integrate the Redux state container framework. The necessary node modules
10
10
  will be automatically included for you.
11
11
 
12
- * Node
13
-
14
- Passing the --node generator option sets up the necessary files for node to render the react_components.
15
-
16
12
  *******************************************************************************
17
13
 
18
14
  After running the generator, you will want to:
@@ -22,56 +22,28 @@ module ReactOnRails
22
22
  route "get 'hello_world', to: 'hello_world#index'"
23
23
  end
24
24
 
25
- def update_git_ignore
26
- data = <<-DATA.strip_heredoc
27
- # React on Rails
28
- npm-debug.log*
29
- node_modules
30
-
31
- # Generated js bundles
32
- /public/webpack/*
33
- DATA
34
-
35
- if dest_file_exists?(".gitignore")
36
- append_to_file(".gitignore", data)
37
- else
38
- GeneratorMessages.add_error(setup_file_error(".gitignore", data))
39
- end
40
- end
41
-
42
25
  def create_react_directories
43
- dirs = %w[components containers startup]
44
- dirs.each { |name| empty_directory("client/app/bundles/HelloWorld/#{name}") }
26
+ dirs = %w[components]
27
+ dirs.each { |name| empty_directory("app/javascript/bundles/HelloWorld/#{name}") }
45
28
  end
46
29
 
47
30
  def copy_base_files
48
31
  base_path = "base/base/"
49
32
  base_files = %w[app/controllers/hello_world_controller.rb
50
- config/webpacker_lite.yml
51
- client/.babelrc
52
- client/webpack.config.js
53
- client/REACT_ON_RAILS_CLIENT_README.md]
33
+ app/views/layouts/hello_world.html.erb
34
+ config/initializers/react_on_rails.rb
35
+ Procfile.dev
36
+ Procfile.dev-server]
54
37
  base_files.each { |file| copy_file("#{base_path}#{file}", file) }
55
38
  end
56
39
 
57
- def template_base_files
58
- base_path = "base/base/"
59
- %w[app/views/layouts/hello_world.html.erb
60
- config/initializers/react_on_rails.rb
61
- Procfile.dev
62
- client/package.json].each { |file| template("#{base_path}#{file}.tt", file) }
63
- end
64
-
65
- def template_package_json
66
- if dest_file_exists?("package.json")
67
- add_yarn_postinstall_script_in_package_json
68
- else
69
- template("base/base/package.json", "package.json")
70
- end
40
+ def add_base_gems_to_gemfile
41
+ gem "mini_racer", platforms: :ruby
42
+ run "bundle"
71
43
  end
72
44
 
73
- def add_base_gems_to_gemfile
74
- append_to_file("Gemfile", "\ngem 'mini_racer', platforms: :ruby\ngem 'webpacker_lite'\n")
45
+ def add_yarn_dependencies
46
+ run "yarn add react-on-rails"
75
47
  end
76
48
 
77
49
  def append_to_spec_rails_helper
@@ -85,10 +57,14 @@ module ReactOnRails
85
57
  else
86
58
  GeneratorMessages.add_info(
87
59
  <<-MSG.strip_heredoc
88
- Did not find spec/rails_helper.rb or spec/spec_helper.rb to add
89
- # Ensure that if we are running js tests, we are using latest webpack assets
90
- # This will use the defaults of :js and :server_rendering meta tags
91
- ReactOnRails::TestHelper.configure_rspec_to_compile_assets(config)
60
+
61
+ We did not find a spec/rails_helper.rb or spec/spec_helper.rb to add
62
+ the React on Rails Test helper, which ensures that if we are running
63
+ js tests, then we are using latest webpack assets. You can later add
64
+ this to your rspec config:
65
+
66
+ # This will use the defaults of :js and :server_rendering meta tags
67
+ ReactOnRails::TestHelper.configure_rspec_to_compile_assets(config)
92
68
  MSG
93
69
  )
94
70
  end
@@ -102,54 +78,45 @@ module ReactOnRails
102
78
  ReactOnRails::TestHelper.configure_rspec_to_compile_assets(config)
103
79
  STR
104
80
 
105
- def print_helpful_message
106
- message = <<-MSG.strip_heredoc
81
+ def self.helpful_message
82
+ <<-MSG.strip_heredoc
107
83
 
108
84
  What to do next:
109
85
 
110
- - Include your webpack assets to your application layout.
111
-
112
- <%= javascript_pack_tag 'main' %>
86
+ - Include your webpack assets to your application layout. Change hello-world-bundle as needed.
113
87
 
114
- - Ensure your bundle and yarn installs of dependencies are up to date.
115
-
116
- bundle && yarn
88
+ <%= javascript_pack_tag 'hello-world-bundle' %>
117
89
 
118
90
  - Run the foreman command to start the rails server and run webpack in watch mode.
119
91
 
120
92
  foreman start -f Procfile.dev
121
93
 
94
+ - Change this line app/views/hello_world/index.html.erb to `prerender: true` to see
95
+ server rendering (right click on page and select "view source").
96
+
97
+ <%= react_component("HelloWorldApp", props: @hello_world_props, prerender: true) %>
98
+
99
+ - Run the foreman command to start the rails server and run webpack in HMR mode. Be sure
100
+ to change your development/dev_server/hmr setting to true to see HMR in action.
101
+ Note, you cannot use the default Procfile.dev-server setup with server rendering.
102
+
103
+ foreman start -f Procfile.dev-server
104
+
105
+ - You may run the commands in the Procfiles in separate shells rather than using foreman.
106
+
107
+ - See the documentation on https://github.com/rails/webpacker/blob/master/docs/webpack.md
108
+ for how to customize the default webpack configuration.
109
+
122
110
  - Visit http://localhost:3000/hello_world and see your React On Rails app running!
123
111
  MSG
124
- GeneratorMessages.add_info(message)
125
112
  end
126
113
 
127
- private
128
-
129
- def add_yarn_postinstall_script_in_package_json
130
- client_package_json = File.join(destination_root, "package.json")
131
- contents = File.read(client_package_json)
132
- postinstall = %("postinstall": "cd client && yarn install")
133
- if contents =~ /"scripts" *:/
134
- replacement = <<-STRING
135
- "scripts": {
136
- #{postinstall},
137
- STRING
138
- regexp = / {2}"scripts": {/
139
- else
140
- regexp = /^{/
141
- replacement = <<-STRING.strip_heredoc
142
- {
143
- "scripts": {
144
- #{postinstall}
145
- },
146
- STRING
147
- end
148
-
149
- contents.gsub!(regexp, replacement)
150
- File.open(client_package_json, "w+") { |f| f.puts contents }
114
+ def print_helpful_message
115
+ GeneratorMessages.add_info(self.class.helpful_message)
151
116
  end
152
117
 
118
+ private
119
+
153
120
  # From https://github.com/rails/rails/blob/4c940b2dbfb457f67c6250b720f63501d74a45fd/railties/lib/rails/generators/rails/app/app_generator.rb
154
121
  def app_name
155
122
  @app_name ||= (defined_app_const_base? ? defined_app_name : File.basename(destination_root))
@@ -5,6 +5,7 @@ require_relative "generator_helper"
5
5
 
6
6
  module ReactOnRails
7
7
  module Generators
8
+ # TODO9: Do we need something like this still? How to put in with
8
9
  FALLBACK_OPTION_FOR_NODE_MODULES = <<-TEXT
9
10
  // This fixes an issue with resolving 'react' when using a local symlinked version
10
11
  // of the node_package folder
@@ -28,7 +29,8 @@ module ReactOnRails
28
29
  desc: "Setup prerender true for server rendered examples"
29
30
 
30
31
  def copy_rspec_files
31
- %w[spec/spec_helper.rb
32
+ %w[.eslintrc
33
+ spec/spec_helper.rb
32
34
  spec/rails_helper.rb
33
35
  spec/simplecov_helper.rb
34
36
  .rspec].each { |file| copy_file(file) }
@@ -54,16 +56,16 @@ module ReactOnRails
54
56
  File.open(hello_world_index, "w+") { |f| f.puts new_hello_world_contents }
55
57
  end
56
58
 
57
- def add_yarn_relative_install_script_in_client_package_json
58
- client_package_json = File.join(destination_root, "client", "package.json")
59
- contents = File.read(client_package_json)
59
+ def add_yarn_relative_install_script_in_package_json
60
+ package_json = File.join(destination_root, "package.json")
61
+ contents = File.read(package_json)
60
62
  replacement_value = <<-STRING
61
63
  "scripts": {
62
64
  "postinstall": "yarn link react-on-rails",
63
65
  STRING
64
66
  new_client_package_json_contents = contents.gsub(/ {2}"scripts": {/,
65
67
  replacement_value)
66
- File.open(client_package_json, "w+") { |f| f.puts new_client_package_json_contents }
68
+ File.open(package_json, "w+") { |f| f.puts new_client_package_json_contents }
67
69
  end
68
70
  end
69
71
  end
@@ -19,13 +19,6 @@ module ReactOnRails
19
19
  desc: "Install Redux gems and Redux version of Hello World Example. Default: false",
20
20
  aliases: "-R"
21
21
 
22
- # --redux
23
- class_option :node,
24
- type: :boolean,
25
- default: false,
26
- desc: "Sets up node as a server rendering option. Default: false",
27
- aliases: "-N"
28
-
29
22
  # --ignore-warnings
30
23
  class_option :ignore_warnings,
31
24
  type: :boolean,
@@ -53,9 +46,11 @@ module ReactOnRails
53
46
 
54
47
  def invoke_generators
55
48
  invoke "react_on_rails:base"
56
- invoke "react_on_rails:react_no_redux" unless options.redux?
57
- invoke "react_on_rails:react_with_redux" if options.redux?
58
- invoke "react_on_rails:node" if options.node?
49
+ if options.redux?
50
+ invoke "react_on_rails:react_with_redux"
51
+ else
52
+ invoke "react_on_rails:react_no_redux"
53
+ end
59
54
  end
60
55
 
61
56
  # NOTE: other requirements for existing files such as .gitignore or application.
@@ -11,21 +11,22 @@ module ReactOnRails
11
11
  source_root(File.expand_path("../templates", __FILE__))
12
12
 
13
13
  def copy_base_files
14
- base_path = "base/base/"
15
- base_files = %w[client/app/bundles/HelloWorld/components/HelloWorld.jsx]
16
- base_files.each { |file| copy_file("#{base_path}#{file}", file) }
14
+ base_js_path = "base/base"
15
+ base_files = %w[app/javascript/bundles/HelloWorld/components/HelloWorld.jsx]
16
+ base_files.each { |file| copy_file("#{base_js_path}/#{file}", file) }
17
17
  end
18
18
 
19
19
  def create_appropriate_templates
20
- base_path = "base/base/"
21
- location = "client/app/bundles/HelloWorld/"
22
- source = base_path + location
20
+ base_path = "base/base"
23
21
  config = {
24
22
  component_name: "HelloWorld",
25
- app_relative_path: "../components/HelloWorld"
23
+ app_relative_path: "../bundles/HelloWorld/components/HelloWorld"
26
24
  }
27
- template("#{source}/startup/registration.jsx.tt", "#{location}/startup/registration.jsx", config)
28
- template("#{base_path}app/views/hello_world/index.html.erb.tt", "app/views/hello_world/index.html.erb", config)
25
+
26
+ template("#{base_path}/app/javascript/packs/registration.js.tt",
27
+ "app/javascript/packs/hello-world-bundle.js", config)
28
+ template("#{base_path}/app/views/hello_world/index.html.erb.tt",
29
+ "app/views/hello_world/index.html.erb", config)
29
30
  end
30
31
  end
31
32
  end
@@ -9,33 +9,43 @@ module ReactOnRails
9
9
  source_root(File.expand_path("../templates", __FILE__))
10
10
 
11
11
  def create_redux_directories
12
- dirs = %w[actions constants reducers store]
13
- dirs.each { |name| empty_directory("client/app/bundles/HelloWorld/#{name}") }
12
+ dirs = %w[actions constants containers reducers store startup]
13
+ dirs.each { |name| empty_directory("app/javascript/bundles/HelloWorld/#{name}") }
14
+ end
15
+
16
+ def copy_base_files
17
+ base_js_path = "base/base"
18
+ base_files = %w[app/javascript/bundles/HelloWorld/components/HelloWorld.jsx]
19
+ base_files.each { |file| copy_file("#{base_js_path}/#{file}", file) }
14
20
  end
15
21
 
16
22
  def copy_base_redux_files
17
- base_path = "redux/base/"
18
- %w[client/app/bundles/HelloWorld/components/HelloWorld.jsx
19
- client/app/bundles/HelloWorld/actions/helloWorldActionCreators.jsx
20
- client/app/bundles/HelloWorld/containers/HelloWorldContainer.jsx
21
- client/app/bundles/HelloWorld/constants/helloWorldConstants.jsx
22
- client/app/bundles/HelloWorld/reducers/helloWorldReducer.jsx
23
- client/app/bundles/HelloWorld/store/helloWorldStore.jsx
24
- client/app/bundles/HelloWorld/startup/HelloWorldApp.jsx].each do |file|
25
- copy_file(base_path + file, file)
23
+ base_hello_world_path = "redux/base/app/javascript/bundles/HelloWorld"
24
+ %w[actions/helloWorldActionCreators.js
25
+ containers/HelloWorldContainer.js
26
+ constants/helloWorldConstants.js
27
+ reducers/helloWorldReducer.js
28
+ store/helloWorldStore.js
29
+ startup/HelloWorldApp.jsx].each do |file|
30
+ copy_file("#{base_hello_world_path}/#{file}",
31
+ "app/javascript/bundles/HelloWorld/#{file}")
26
32
  end
27
33
  end
28
34
 
29
35
  def create_appropriate_templates
30
- base_path = "base/base/"
31
- location = "client/app/bundles/HelloWorld/"
32
- source = base_path + location
36
+ base_path = "base/base"
37
+ base_js_path = "#{base_path}/app/javascript"
33
38
  config = {
34
39
  component_name: "HelloWorldApp",
35
- app_relative_path: "./HelloWorldApp"
40
+ app_relative_path: "../bundles/HelloWorld/startup/HelloWorldApp"
36
41
  }
37
- template("#{source}/startup/registration.jsx.tt", "#{location}/startup/registration.jsx", config)
38
- template("#{base_path}app/views/hello_world/index.html.erb.tt", "app/views/hello_world/index.html.erb", config)
42
+
43
+ template("#{base_js_path}/packs/registration.js.tt", "app/javascript/packs/hello-world-bundle.js", config)
44
+ template("#{base_path}/app/views/hello_world/index.html.erb.tt", "app/views/hello_world/index.html.erb", config)
45
+ end
46
+
47
+ def add_redux_yarn_dependencies
48
+ run "yarn add redux react-redux"
39
49
  end
40
50
  end
41
51
  end
@@ -21,3 +21,5 @@ rules:
21
21
 
22
22
  # because template cannot find react-on-rails
23
23
  import/no-unresolved: 0
24
+
25
+ semi: 0
@@ -0,0 +1,4 @@
1
+ web: rails s -p 3000
2
+
3
+ # Next line runs a watch process with webpack
4
+ client: sh -c 'rm -rf public/packs/* || true && bundle exec rake react_on_rails:locale && bin/webpack -w'
@@ -0,0 +1,5 @@
1
+ web: rails s -p 3000
2
+
3
+ # Next line runs the webpack-dev-server
4
+ # You can edit config/webpacker.yml to set HMR to true to see hot reloading
5
+ client: sh -c 'rm -rf public/packs/* || true && bundle exec rake react_on_rails:locale && bin/webpack-dev-server'
@@ -8,9 +8,8 @@ export default class HelloWorld extends React.Component {
8
8
 
9
9
  /**
10
10
  * @param props - Comes from your rails view.
11
- * @param _railsContext - Comes from React on Rails
12
11
  */
13
- constructor(props, _railsContext) {
12
+ constructor(props) {
14
13
  super(props);
15
14
 
16
15
  // How to set initial state in ES6 class syntax
@@ -1,3 +1,2 @@
1
1
  <h1>Hello World</h1>
2
2
  <%%= react_component("<%= config[:component_name] %>", props: @hello_world_props, prerender: false) %>
3
-
@@ -0,0 +1,12 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <title>ReactOnRailsWithWebpacker</title>
5
+ <%= csrf_meta_tags %>
6
+ <%= javascript_pack_tag 'hello-world-bundle' %>
7
+ </head>
8
+
9
+ <body>
10
+ <%= yield %>
11
+ </body>
12
+ </html>
@@ -0,0 +1,41 @@
1
+ # frozen_string_literal: true
2
+
3
+ # See docs/basics/configuration.md for many more options
4
+
5
+ ReactOnRails.configure do |config|
6
+ # This configures the script to run to build the production assets by webpack. Set this to nil
7
+ # if you don't want react_on_rails building this file for you.
8
+ config.build_production_command = "RAILS_ENV=production bin/webpack"
9
+
10
+ ################################################################################
11
+ ################################################################################
12
+ # TEST CONFIGURATION OPTIONS
13
+ # Below options are used with the use of this test helper:
14
+ # ReactOnRails::TestHelper.configure_rspec_to_compile_assets(config)
15
+ ################################################################################
16
+
17
+ # If you are using this in your spec_helper.rb (or rails_helper.rb):
18
+ #
19
+ # ReactOnRails::TestHelper.configure_rspec_to_compile_assets(config)
20
+ #
21
+ # with rspec then this controls what yarn command is run
22
+ # to automatically refresh your webpack assets on every test run.
23
+ #
24
+ config.build_test_command = "RAILS_ENV=test bin/webpack"
25
+
26
+ ################################################################################
27
+ ################################################################################
28
+ # SERVER RENDERING OPTIONS
29
+ ################################################################################
30
+ # This is the file used for server rendering of React when using `(prerender: true)`
31
+ # If you are never using server rendering, you should set this to "".
32
+ # Note, there is only one server bundle, unlike JavaScript where you want to minimize the size
33
+ # of the JS sent to the client. For the server rendering, React on Rails creates a pool of
34
+ # JavaScript execution instances which should handle any component requested.
35
+ #
36
+ # While you may configure this to be the same as your client bundle file, this file is typically
37
+ # different. You should have ONE server bundle which can create all of your server rendered
38
+ # React components.
39
+ #
40
+ config.server_bundle_js_file = "hello-world-bundle.js"
41
+ end
@@ -0,0 +1,25 @@
1
+ ---
2
+ extends: eslint-config-shakacode
3
+
4
+ plugins:
5
+ - react
6
+
7
+ globals:
8
+ __DEBUG_SERVER_ERRORS__: true
9
+ __SERVER_ERRORS__: true
10
+
11
+ env:
12
+ browser: true
13
+ node: true
14
+ mocha: true
15
+
16
+ rules:
17
+ no-console: 0
18
+
19
+ # https://github.com/benmosher/eslint-plugin-import/issues/340
20
+ import/no-extraneous-dependencies: 0
21
+
22
+ # because template cannot find react-on-rails
23
+ import/no-unresolved: 0
24
+
25
+ semi: 0
@@ -38,7 +38,6 @@ Capybara.javascript_driver = :poltergeist
38
38
  RSpec.configure do |config|
39
39
  # Ensure that if we are running js tests, we are using latest webpack assets
40
40
  # This will use the defaults of :js and :server_rendering meta tags
41
- ReactOnRails::TestHelper.launch_node if ReactOnRails.configuration.server_render_method == "NodeJS"
42
41
  ReactOnRails::TestHelper.configure_rspec_to_compile_assets(config)
43
42
 
44
43
  # Remove this line if you"re not using ActiveRecord or ActiveRecord fixtures
@@ -2,7 +2,7 @@
2
2
 
3
3
  # Starts SimpleCov for code coverage.
4
4
 
5
- if ENV["COVERAGE"]
5
+ if ENV["COVERAGE"] == "true"
6
6
  require "simplecov"
7
7
 
8
8
  # Using a command name prevents results from getting clobbered by other test suites
@@ -19,6 +19,8 @@
19
19
  #
20
20
  # See http://rubydoc.info/gems/rspec-core/RSpec/Core/Configuration
21
21
  RSpec.configure do |config|
22
+ ReactOnRails::TestHelper.configure_rspec_to_compile_assets(config)
23
+
22
24
  # rspec-expectations config goes here. You can use an alternate
23
25
  # assertion/expectation library such as wrong or the stdlib/minitest
24
26
  # assertions if you prefer.
@@ -7,9 +7,7 @@ import HelloWorldContainer from '../containers/HelloWorldContainer';
7
7
  // See documentation for https://github.com/reactjs/react-redux.
8
8
  // This is how you get props from the Rails view into the redux store.
9
9
  // This code here binds your smart component to the redux store.
10
- // railsContext provides contextual information especially useful for server rendering, such as
11
- // knowing the locale. See the React on Rails documentation for more info on the railsContext
12
- const HelloWorldApp = (props, _railsContext) => (
10
+ const HelloWorldApp = (props) => (
13
11
  <Provider store={configureStore(props)}>
14
12
  <HelloWorldContainer />
15
13
  </Provider>