react_on_rails 13.3.4 → 13.4.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (47) hide show
  1. checksums.yaml +4 -4
  2. data/.circleci/config.yml +2 -2
  3. data/.github/ISSUE_TEMPLATE/bug_report.md +1 -1
  4. data/.github/workflows/lint-js-and-ruby.yml +2 -2
  5. data/.github/workflows/main.yml +5 -5
  6. data/.github/workflows/rspec-package-specs.yml +1 -1
  7. data/CHANGELOG.md +86 -65
  8. data/Gemfile.development_dependencies +2 -3
  9. data/README.md +5 -0
  10. data/docs/additional-details/recommended-project-structure.md +6 -6
  11. data/docs/additional-details/tips-for-usage-with-sp6.md +15 -0
  12. data/docs/deployment/heroku-deployment.md +15 -11
  13. data/docs/getting-started.md +28 -27
  14. data/docs/guides/configuration.md +17 -17
  15. data/docs/guides/file-system-based-automated-bundle-generation.md +42 -50
  16. data/docs/guides/hmr-and-hot-reloading-with-the-webpack-dev-server.md +10 -10
  17. data/docs/guides/how-react-on-rails-works.md +1 -1
  18. data/docs/guides/installation-into-an-existing-rails-app.md +4 -4
  19. data/docs/guides/rails-webpacker-react-integration-options.md +4 -4
  20. data/docs/guides/react-on-rails-overview.md +6 -7
  21. data/docs/guides/rspec-configuration.md +11 -11
  22. data/docs/guides/tutorial.md +11 -14
  23. data/docs/guides/upgrading-react-on-rails.md +2 -2
  24. data/docs/guides/webpack-configuration.md +14 -14
  25. data/docs/home.md +3 -3
  26. data/docs/javascript/asset-pipeline.md +4 -4
  27. data/docs/javascript/converting-from-custom-webpack-config-to-rails-webpacker-config.md +8 -8
  28. data/docs/javascript/server-rendering-tips.md +1 -1
  29. data/docs/javascript/troubleshooting-when-using-shakapacker.md +77 -0
  30. data/docs/outdated/rails-assets-relative-paths.md +1 -1
  31. data/docs/outdated/rails-assets.md +1 -1
  32. data/docs/react-on-rails-pro/react-on-rails-pro.md +1 -1
  33. data/lib/generators/react_on_rails/adapt_for_older_shakapacker_generator.rb +41 -0
  34. data/lib/generators/react_on_rails/base_generator.rb +3 -47
  35. data/lib/generators/react_on_rails/generator_messages.rb +40 -0
  36. data/lib/generators/react_on_rails/install_generator.rb +21 -0
  37. data/lib/generators/react_on_rails/templates/base/base/Procfile.dev +2 -2
  38. data/lib/generators/react_on_rails/templates/base/base/Procfile.dev-static +2 -2
  39. data/lib/generators/react_on_rails/templates/base/base/config/initializers/react_on_rails.rb +2 -2
  40. data/lib/generators/react_on_rails/templates/base/base/config/{webpacker.yml → shakapacker.yml} +3 -3
  41. data/lib/generators/react_on_rails/templates/base/base/config/webpack/commonWebpackConfig.js.tt +3 -1
  42. data/lib/react_on_rails/helper.rb +23 -11
  43. data/lib/react_on_rails/packs_generator.rb +2 -0
  44. data/lib/react_on_rails/server_rendering_pool/ruby_embedded_java_script.rb +1 -3
  45. data/lib/react_on_rails/version.rb +1 -1
  46. data/package.json +1 -1
  47. metadata +6 -3
@@ -4,7 +4,7 @@ _Also see the example repo of [React on Rails Tutorial With SSR, HMR fast refres
4
4
 
5
5
  -----
6
6
 
7
- *Updated for Ruby 2.7, Rails 7, React on Rails v13, and Shakapacker v6*
7
+ *Updated for Ruby 2.7, Rails 7, React on Rails v13, and Shakapacker v7*
8
8
 
9
9
  This tutorial guides you through setting up a new or existing Rails app with **React on Rails**, demonstrating Rails + React + Redux + Server Rendering.
10
10
 
@@ -25,8 +25,8 @@ By the time you read this, the latest may have changed. Be sure to check the ver
25
25
  - [Installation](#installation)
26
26
  - [Setting up your environment](#setting-up-your-environment)
27
27
  - [Create a new Ruby on Rails App](#create-a-new-ruby-on-rails-app)
28
- - [Add the shakapacker and react_on_rails gems](#add-the-shakapacker-and-react_on_rails-gems)
29
- - [Run the shakapacker (webpacker) generator](#run-the-shakapacker-webpacker-generator)
28
+ - [Add the Shakapacker and react_on_rails gems](#add-the-shakapacker-and-react_on_rails-gems)
29
+ - [Run the Shakapacker generator](#run-the-shakapacker-generator)
30
30
  - [Run the React on Rails Generator](#run-the-react-on-rails-generator)
31
31
  - [Setting up your environment variables](#setting-up-your-environment-variables)
32
32
  - [Running the app](#running-the-app)
@@ -37,7 +37,7 @@ By the time you read this, the latest may have changed. Be sure to check the ver
37
37
  - [Other features](#other-features)
38
38
  - [Turning on Server Rendering](#turning-on-server-rendering)
39
39
  - [Moving from the Rails default `/app/javascript` to the recommended `/client` structure](#moving-from-the-rails-default-appjavascript-to-the-recommended-client-structure)
40
- - [Using HMR with the shakapacker setup](#using-hmr-with-the-railswebpacker-setup)
40
+ - [Using HMR with the shakapacker setup](#using-hmr-with-the-shakapacker-setup)
41
41
  - [Custom IP & PORT setup (Cloud9 example)](#custom-ip--port-setup-cloud9-example)
42
42
  - [RubyMine performance tip](#rubymine-performance-tip)
43
43
  - [Conclusion](#conclusion)
@@ -68,7 +68,7 @@ cd test-react-on-rails
68
68
  ```
69
69
  Note: You can use `--database=postgresql` option to use Postgresql for the database.
70
70
 
71
- ## Add the shakapacker and react_on_rails gems
71
+ ## Add the Shakapacker and react_on_rails gems
72
72
  We recommend using the latest version of these gems. Otherwise, specify the
73
73
  exact versions of both the gem and npm packages. In other words, don't use
74
74
  the `^` or `~` in the version specifications.
@@ -81,10 +81,10 @@ bundle add shakapacker --strict
81
81
  Note: The latest released React On Rails version is considered stable. Please use the latest
82
82
  version to ensure you get all the security patches and the best support.
83
83
 
84
- ## Run the shakapacker (webpacker) generator
84
+ ## Run the Shakapacker generator
85
85
 
86
86
  ```bash
87
- bundle exec rails webpacker:install
87
+ bundle exec rails shakapacker:install
88
88
  ```
89
89
 
90
90
  Commit all the changes so far to avoid getting errors in the next step.
@@ -134,7 +134,7 @@ Visit [http://localhost:3000/hello_world](http://localhost:3000/hello_world) and
134
134
 
135
135
  # HMR vs. React Hot Reloading
136
136
 
137
- First, check that the `hmr` and the `inline` options are `true` in your `config/webpacker.yml` file.
137
+ First, check that the `hmr` and the `inline` options are `true` in your `config/shakapacker.yml` file.
138
138
 
139
139
  The basic setup will have HMR working with the default Shakapacker setup. The basic
140
140
  [HMR](https://webpack.js.org/concepts/hot-module-replacement/), without a special
@@ -294,7 +294,7 @@ If you want to test this out with HMR, then you also need to add this line to yo
294
294
  ```
295
295
 
296
296
  More likely, you will create a different build file for server rendering. However, if you want to
297
- use the same file from the webpack-dev-server, you'll need to add that line.
297
+ use the same file from the shakapack-dev-server, you'll need to add that line.
298
298
 
299
299
  When you look at the source code for the page (right click, view source in Chrome), you can see the difference between non-server rendering, where your DIV containing your React looks like this:
300
300
 
@@ -324,7 +324,7 @@ ShakaCode recommends that you use `/client` for your client side app. This way a
324
324
  mv app/javascript client
325
325
  ```
326
326
 
327
- 2. Edit your `/config/webpacker.yml` file. Change the `default/source_path`:
327
+ 2. Edit your `/config/shakapacker.yml` file. Change the `default/source_path`:
328
328
 
329
329
  ```yml
330
330
  source_path: client
@@ -359,12 +359,9 @@ Then visit https://your-shared-addr.c9users.io:8080/hello_world
359
359
 
360
360
  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.
361
361
 
362
- * Generated files, per the settings in your `config/webpacker.yml`, which default to `public/packs` and `public/packs-test`
362
+ * Generated files, per the settings in your `config/shakapacker.yml`, which default to `public/packs` and `public/packs-test`
363
363
  * `node_modules`
364
364
 
365
-
366
-
367
-
368
365
  # Conclusion
369
366
 
370
367
  * Browse the docs on [our documentation website](https://www.shakacode.com/react-on-rails/docs/)
@@ -12,13 +12,13 @@ Previously, the gem `webpacker` was a Gem dependency.
12
12
 
13
13
  v13 has changed slightly to switch to `shakapacker`.
14
14
 
15
- For details, see see the [Shakapacker guide to upgrading](https://github.com/shakacode/shakapacker/blob/master/docs/v6_upgrade.md)
15
+ For details, see the Shakapacker guide to upgrading to [version 6](https://github.com/shakacode/shakapacker/blob/master/docs/v6_upgrade.md) and [version 7](https://github.com/shakacode/shakapacker/blob/master/docs/v7_upgrade.md)
16
16
 
17
17
  In summary:
18
18
 
19
19
  1. Change the gem reference from 'webpacker' to 'shakapacker'
20
20
  2. Change the npm reference from '@rails/webpacker' to 'shakapacker'
21
- 3. Other updates, depending on what version of rails/webpacker that you had.
21
+ 3. Other updates, depending on what version of `rails/webpacker` that you had.
22
22
 
23
23
  ## Upgrading to v12
24
24
  ### Recent versions
@@ -1,36 +1,36 @@
1
- # Webpack Configuration: custom setup for Webpack or rails/webpacker?
1
+ # Webpack Configuration: custom setup for Webpack or Shakapacker?
2
2
 
3
- ## Webpack vs. rails/webpacker
3
+ ## Webpack vs. Shakapacker
4
4
 
5
5
  [Webpack](https://webpack.js.org) is the JavaScript npm package that prepares all your client-side assets. The Rails asset pipeline used to be the preferable way to prepare client-side assets.
6
6
 
7
- [rails/webpacker](https://github.com/rails/webpacker) is the Ruby gem that mainly gives us 2 things:
7
+ [Shakapacker](https://github.com/shakcode/shakapacker) (the official successor of [rails/webpacker](https://github.com/rails/webpacker)) is the Ruby gem that mainly gives us 2 things:
8
8
 
9
9
  1. View helpers for placing the webpack bundles on your Rails views. React on Rails depends on these view helpers.
10
10
  2. A layer of abstraction on top of Webpack customization. The base setup works great for the client side webpack configuration.
11
11
 
12
- To get a deeper understanding of `rails/webpacker`, watch [RailsConf 2020 CE - Webpacker, It-Just-Works, But How? by Justin Gordon](https://youtu.be/sJLoOpc5LD8)
12
+ To get a deeper understanding of Shakapacker, watch [RailsConf 2020 CE - Webpacker, It-Just-Works, But How? by Justin Gordon](https://youtu.be/sJLoOpc5LD8).
13
13
 
14
14
  Per the example repo [shakacode/react_on_rails_demo_ssr_hmr](https://github.com/shakacode/react_on_rails_demo_ssr_hmr),
15
- you should consider keeping your codebase mostly consistent with the defaults for [rails/webpacker](https://github.com/rails/webpacker).
15
+ you should consider keeping your codebase mostly consistent with the defaults for [Shakapacker](https://github.com/shakacode/shakapacker).
16
16
 
17
17
  # React on Rails
18
18
 
19
- Version 9 of React on Rails added support for the rails/webpacker view helpers so that Webpack produced assets would no longer pass through the Rails asset pipeline. As part of this change, React on Rails added a configuration option to support customization of the node_modules directory. This allowed React on Rails to support the rails/webpacker configuration of the Webpack configuration.
19
+ Version 9 of React on Rails added support for the Shakapacker (`rails/webpacker` of that time) view helpers so that Webpack produced assets would no longer pass through the Rails asset pipeline. As part of this change, React on Rails added a configuration option to support customization of the node_modules directory. This allowed React on Rails to support the Shakapacker configuration of the Webpack configuration.
20
20
 
21
- A key decision in your use React on Rails is whether you go with the rails/webpacker default setup or the traditional React on Rails setup of putting all your client side files under the `/client` directory. While there are technically 2 independent choices involved, the directory structure and the mechanism of Webpack configuration, for simplicity sake we'll assume that these choices go together.
21
+ A key decision in your use React on Rails is whether you go with the Shakapacker default setup or the traditional React on Rails setup of putting all your client side files under the `/client` directory. While there are technically 2 independent choices involved, the directory structure and the mechanism of Webpack configuration, for simplicity sake we'll assume that these choices go together.
22
22
 
23
- ## Option 1: Default Generator Setup: rails/webpacker app/javascript
23
+ ## Option 1: Default Generator Setup: Shakapacker app/javascript
24
24
 
25
- Typical rails/webpacker apps have a standard directory structure as documented [here](https://github.com/rails/webpacker/blob/5-x-stable/docs/recommended-project-structure.md). If you follow the steps in the the [basic tutorial](https://www.shakacode.com/react-on-rails/docs/guides/tutorial/), you will see this pattern in action. In order to customize the Webpack configuration, you need to consult with the [rails/webpacker Webpack configuration](https://www.shakacode.com/react-on-rails/docs/javascript/webpack/).
25
+ Typical Shakapacker apps have a standard directory structure as documented [here](https://github.com/shakacode/shakapacker/blob/master/README.md#configuration-and-code). If you follow the steps in the the [basic tutorial](https://www.shakacode.com/react-on-rails/docs/guides/tutorial/), you will see this pattern in action. In order to customize the Webpack configuration, you need to consult with the [webpack configuration](https://www.shakacode.com/react-on-rails/docs/javascript/webpack/).
26
26
 
27
- The *advantage* of using rails/webpacker to configure Webpack is that there is very little code needed to get started and you don't need to understand really anything about Webpack customization.
27
+ The *advantage* of using Shakapacker to configure Webpack is that there is very little code needed to get started and you don't need to understand really anything about webpack customization.
28
28
 
29
29
  ## Option 2: Traditional React on Rails using the /client directory
30
30
 
31
- Until version 9, all React on Rails apps used the `/client` directory for configuring React on Rails in terms of the configuration of Webpack and location of your JavaScript and Webpack files, including the node_modules directory. Version 9 changed the default to `/` for the `node_modules` location using this value in `config/initializers/react_on_rails.rb`: `config.node_modules_location`.
31
+ Until version 9, all React on Rails apps used the `/client` directory for configuring React on Rails in terms of the configuration of Webpack and location of your JavaScript and webpack files, including the `node_modules` directory. Version 9 changed the default to `/` for the `node_modules` location using this value in `config/initializers/react_on_rails.rb`: `config.node_modules_location`.
32
32
 
33
- You can access values in the `config/webpacker.yml`
33
+ You can access values in the `config/shakapacker.yml`
34
34
 
35
35
  ```js
36
36
  const { config, devServer } = require('shakapacker');
@@ -38,5 +38,5 @@ const { config, devServer } = require('shakapacker');
38
38
 
39
39
  You will want consider using some of the same values set in these files:
40
40
 
41
- * https://github.com/rails/webpacker/blob/master/package/environments/base.js
42
- * https://github.com/rails/webpacker/blob/master/package/environments/development.js
41
+ * https://github.com/shakacode/shakapacker/blob/master/package/environments/base.js
42
+ * https://github.com/shakacode/shakapacker/blob/master/package/environments/development.js
data/docs/home.md CHANGED
@@ -14,10 +14,10 @@
14
14
  2. [Upgrading React on Rails](https://www.shakacode.com/react-on-rails/docs/guides/upgrading-react-on-rails/#upgrading-to-v12).
15
15
 
16
16
  ## Example Apps
17
- 1. [spec/dummy](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy) example repo for a simple configuration of webpack via the rails/webpacker gem
17
+ 1. [spec/dummy](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy) example repo for a simple configuration of webpack via the `shakacode/shakapacker` gem
18
18
  that supports SSR.
19
- 2. Example repo of [React on Rails Tutorial With SSR, HMR fast refresh, and TypeScript](https://github.com/shakacode/react_on_rails_demo_ssr_hmr) for a new way to setup the creation of your SSR bundle with `rails/webpacker`.
19
+ 2. Example repo of [React on Rails Tutorial With SSR, HMR fast refresh, and TypeScript](https://github.com/shakacode/react_on_rails_demo_ssr_hmr) for a new way to setup the creation of your SSR bundle with `shakacode/shakapacker`.
20
20
  3. Live, [open source](https://github.com/shakacode/react-webpack-rails-tutorial), example of this gem, see [reactrails.com](http://reactrails.com).
21
21
 
22
22
  # Other Resources
23
- 1. RailsConf 2020 talk: [Webpacker, It-Just-Works, But How?](http://railsconf.com/2020/video/justin-gordon-webpacker-it-just-works-but-how)
23
+ 1. RailsConf 2020 talk: [Webpacker, It-Just-Works, But How?](https://www.shakacode.com/blog/railsconf-2020-webpacker-it-just-works-but-how/)
@@ -1,12 +1,12 @@
1
1
  # Asset Pipeline with React on Rails
2
2
 
3
- In general, you should not be mixing the asset pipeline with rails/webpacker and React on Rails.
3
+ In general, you should not be mixing the asset pipeline with Shakapacker and React on Rails.
4
4
 
5
- If you're using React, then all of your CSS and images should be under either `/client` or
6
- `/app/javascript` or wherever you want your client side application.
5
+ If you're using React, then all of your CSS and images should be under either `/app/javascript` or
6
+ `/client` or wherever you want your client-side application.
7
7
 
8
8
  If you are incrementally migrating a large application, your main concern will be how to minimize
9
9
  duplication of styles and images between your old application and the new one.
10
10
 
11
- Please email [justin@shakacode.com](mailto:justin@shakacode.com) if you would be interested in help
11
+ Please email [justin@shakacode.com](mailto:justin@shakacode.com) if you would be interested in helping
12
12
  to migrate a larger application.
@@ -1,10 +1,10 @@
1
- # Converting from Custom Webpack Config to Rails Webpacker Config
1
+ # Converting from Custom Webpack Config to Rails Shakapacker Config
2
2
 
3
- 1. Compare your package.json and the dependencies in https://github.com/rails/webpacker/blob/master/package.json
3
+ 1. Compare your package.json and the dependencies in https://github.com/shakacode/shakapacker/blob/master/package.json
4
4
  and avoid any duplicates. We don't want different versions of the same packages.
5
- We want the versions from rails/webpacker unless we specifically want to override them.
6
- 2. Search the rails/webpacker repo for anything you're not sure about in terms of package names.
7
- 3. run `bin/webpacker` and make sure there are zero errors
8
- 4. update webpack plugins and loaders to current or close to current
9
- 5. Make sure that your bin/webpacker and bin/webpacker match the latest on
10
- https://github.com/rails/webpacker/tree/master/lib/install/bin
5
+ We want the versions from `shakacode/shakapacker` unless we specifically want to override them.
6
+ 2. Search the `shakacode/shakapacker` repo for anything you're not sure about in terms of package names.
7
+ 3. Run `bin/shakapacker` and make sure there are zero errors
8
+ 4. Update webpack plugins and loaders to current or close to current
9
+ 5. Make sure that your `bin/shakapacker` and `bin/shakapacker` match the latest on
10
+ https://github.com/shakacode/shakapacker/tree/master/lib/install/bin
@@ -17,7 +17,7 @@ For the best performance with Server Rendering, consider using [React on Rails P
17
17
  ## Troubleshooting Server Rendering
18
18
 
19
19
  1. First be sure your code works with server rendering disabled (`prerender: false`)
20
- 2. Be sure that `config.trace` is true. You will get the server invocation code that renders your component. If you're not using Webpacker, you will also get the whole file used to setup the JavaScript context.
20
+ 2. Be sure that `config.trace` is true. You will get the server invocation code that renders your component. If you're not using Shakapacker, you will also get the whole file used to setup the JavaScript context.
21
21
 
22
22
  ## CSS
23
23
  Server bundles must always have CSS Extracted
@@ -0,0 +1,77 @@
1
+ # Client rendering crashes when configuring `optimization.runtimeChunk` to `multiple`
2
+
3
+ ## Context
4
+
5
+ 1. Ruby version: 3.1
6
+ 2. Rails version: 7.0.6
7
+ 3. Shakapacker version: 6.6.0
8
+ 4. React on Rails version: 13.3.5
9
+
10
+ ## The failure
11
+
12
+ Configuring Webpack to embed the runtime in each chunk and calling `react_component` twice in a rails view/partial causes the client render to crash with the following error:
13
+
14
+ ```
15
+ Could not find component registered with name XXX. Registered component names include [ YYY ]. Maybe you forgot to register the component?
16
+ ```
17
+
18
+ ```
19
+ VM4859 clientStartup.js:132 Uncaught Error: ReactOnRails encountered an error while rendering component: XXX. See above error message.
20
+ at Object.get (ComponentRegistry.js:40:15)
21
+ at Object.getComponent (ReactOnRails.js:211:44)
22
+ at render (VM4859 clientStartup.js:103:53)
23
+ at forEachReactOnRailsComponentRender (VM4859 clientStartup.js:138:9)
24
+ at reactOnRailsPageLoaded (VM4859 clientStartup.js:164:5)
25
+ at renderInit (VM4859 clientStartup.js:205:9)
26
+ at onPageReady (VM4859 clientStartup.js:234:9)
27
+ at HTMLDocument.onReadyStateChange (VM4859 clientStartup.js:238:13)
28
+ ```
29
+
30
+ ## Configs
31
+
32
+ ### Webpack configuration
33
+
34
+ ```js
35
+ optimization: {
36
+ runtimeChunk: 'multiple'
37
+ },
38
+ ```
39
+
40
+ ### Rails view
41
+
42
+ ```haml
43
+ = react_component("XXX", props: @props)
44
+ = yield
45
+ = react_component("YYY", props: @props)
46
+ ```
47
+
48
+ ## The problem
49
+
50
+ Configuring Webpack to embed the runtime in each chunk and calling `react_component` twice in a rails view/partial causes the client render to crash.
51
+
52
+ Read more at https://github.com/shakacode/react_on_rails/issues/1558.
53
+
54
+ ## Solution
55
+
56
+ To overcome this issue, we could use [shakapacker](https://github.com/shakacode/shakapacker)'s default optimization configuration (pseudo-code):
57
+
58
+ ```js
59
+ const { webpackConfig: baseClientWebpackConfig } = require('shakapacker');
60
+
61
+ // ...
62
+
63
+ config.optimization = baseClientWebpackConfig.optimization;
64
+ ```
65
+ As it set the `optimization.runtimeChunk` to `single`. See its source:
66
+
67
+ `package/environments/base.js:115`
68
+ ```js
69
+ optimization: {
70
+ splitChunks: { chunks: 'all' },
71
+
72
+ runtimeChunk: 'single'
73
+ },
74
+ ```
75
+ https://github.com/shakacode/shakapacker/blob/cdf32835d3e0949952b8b4b53063807f714f9b24/package/environments/base.js#L115-L119
76
+
77
+ Or set `optimization.runtimeChunk` to `single` directly.
@@ -1,4 +1,4 @@
1
- *Note: this doc reflects using Sprockets for assets and has not been updated for rails/webpacker*
1
+ *Note: this doc reflects using Sprockets for assets and has not been updated for Shakapacker or rails/webpacker*
2
2
 
3
3
  # Using Webpack bundled assets with the Rails Asset Pipeline
4
4
 
@@ -1,6 +1,6 @@
1
1
  # Rails assets and the Extract Text Plugin
2
2
 
3
- *This doc needs updating for the use of rails/webpacker with React on Rails*
3
+ *This doc needs updating for the use of Shakapacker or rails/webpacker with React on Rails*
4
4
 
5
5
  The [Webpack file loader](https://github.com/webpack/file-loader) copies referenced files to
6
6
  the destination output directory, with an MD5 hash. The other term for this is a "digest".
@@ -3,7 +3,7 @@
3
3
  Support React on Rails development [by becoming a Github sponsor](https://github.com/sponsors/shakacode) and get these benefits:
4
4
 
5
5
  1. 1-hour per month of support via Slack, PR reviews, and Zoom for React on Rails,
6
- React-Rails, rails/webpacker, ReScript (ReasonML), TypeScript, Rust, etc.
6
+ React-Rails, Shakapacker, rails/webpacker, ReScript (ReasonML), TypeScript, Rust, etc.
7
7
  2. React on Rails Pro Software that extends React on Rails with Node server rendering,
8
8
  fragment caching, code-splitting, and other performance enhancements for React on Rails.
9
9
 
@@ -0,0 +1,41 @@
1
+ # frozen_string_literal: true
2
+
3
+ require "rails/generators"
4
+ require_relative "generator_helper"
5
+
6
+ module ReactOnRails
7
+ module Generators
8
+ class AdaptForOlderShakapackerGenerator < Rails::Generators::Base
9
+ include GeneratorHelper
10
+ Rails::Generators.hide_namespace(namespace)
11
+
12
+ def change_spelling_to_webpacker
13
+ puts "Change spelling to webpacker v7"
14
+ files = %w[
15
+ Procfile.dev
16
+ Procfile.dev-static
17
+ config/shakapacker.yml
18
+ config/initializers/react_on_rails.rb
19
+ ]
20
+ files.each { |file| gsub_file(file, "shakapacker", "webpacker") }
21
+ end
22
+
23
+ def rename_config_file
24
+ puts "Rename to config/webpacker.yml"
25
+ puts "Renaming shakapacker.yml into webpacker.yml"
26
+ FileUtils.mv("config/shakapacker.yml", "config/webpacker.yml")
27
+ end
28
+
29
+ def modify_requiring_webpack_config_in_js
30
+ puts "Update commonWebpackConfig.js to follow the Shakapacker v6 interface"
31
+ file = "config/webpack/commonWebpackConfig.js"
32
+ gsub_file(file, "const baseClientWebpackConfig = generateWebpackConfig();\n\n", "")
33
+ gsub_file(
34
+ file,
35
+ "const { generateWebpackConfig, merge } = require('shakapacker');",
36
+ "const { webpackConfig: baseClientWebpackConfig, merge } = require('shakapacker');"
37
+ )
38
+ end
39
+ end
40
+ end
41
+ end
@@ -65,10 +65,10 @@ module ReactOnRails
65
65
  end
66
66
  end
67
67
 
68
- def copy_webpacker_config
69
- puts "Adding Webpacker v6 config"
68
+ def copy_shakapacker_config
69
+ puts "Adding Shakapacker v7 config file"
70
70
  base_path = "base/base/"
71
- base_files = %w[config/webpacker.yml]
71
+ base_files = %w[config/shakapacker.yml]
72
72
  base_files.each { |file| copy_file("#{base_path}#{file}", file) }
73
73
  end
74
74
 
@@ -132,50 +132,6 @@ module ReactOnRails
132
132
  ReactOnRails::TestHelper.configure_rspec_to_compile_assets(config)
133
133
  STR
134
134
 
135
- def self.helpful_message
136
- <<-MSG.strip_heredoc
137
-
138
- What to do next:
139
-
140
- - See the documentation on https://github.com/shakacode/shakapacker#webpack-configuration
141
- for how to customize the default webpack configuration.
142
-
143
- - Include your webpack assets to your application layout.
144
-
145
- <%= javascript_pack_tag 'hello-world-bundle' %>
146
-
147
- - To start Rails server run:
148
-
149
- ./bin/dev # Running with HMR
150
-
151
- or
152
-
153
- ./bin/dev-static # Running with statically created bundles, without HMR
154
-
155
- - To server render, change this line app/views/hello_world/index.html.erb to
156
- `prerender: true` to see server rendering (right click on page and select "view source").
157
-
158
- <%= react_component("HelloWorldApp", props: @hello_world_props, prerender: true) %>
159
-
160
- Alternative steps to run the app:
161
-
162
- - Run `rails s` to start the Rails server.
163
-
164
- - Run bin/webpacker-dev-server to start the Webpack dev server for compilation of Webpack
165
- assets as soon as you save. This default setup with the dev server does not work
166
- for server rendering
167
-
168
- - Visit http://localhost:3000/hello_world and see your React On Rails app running!
169
-
170
- - To turn on HMR, edit config/webpacker.yml and set HMR to true. Restart the rails server
171
- and bin/webpacker-dev-server. Or use Procfile.dev.
172
- MSG
173
- end
174
-
175
- def print_helpful_message
176
- GeneratorMessages.add_info(self.class.helpful_message)
177
- end
178
-
179
135
  private
180
136
 
181
137
  # From https://github.com/rails/rails/blob/4c940b2dbfb457f67c6250b720f63501d74a45fd/railties/lib/rails/generators/rails/app/app_generator.rb
@@ -37,5 +37,45 @@ module GeneratorMessages
37
37
  def clear
38
38
  @output = []
39
39
  end
40
+
41
+ def helpful_message_after_installation
42
+ <<~MSG
43
+
44
+ What to do next:
45
+
46
+ - See the documentation on https://github.com/shakacode/shakapacker#webpack-configuration
47
+ for how to customize the default webpack configuration.
48
+
49
+ - Include your webpack assets to your application layout.
50
+
51
+ <%= javascript_pack_tag 'hello-world-bundle' %>
52
+
53
+ - To start Rails server run:
54
+
55
+ ./bin/dev # Running with HMR
56
+
57
+ or
58
+
59
+ ./bin/dev-static # Running with statically created bundles, without HMR
60
+
61
+ - To server render, change this line app/views/hello_world/index.html.erb to
62
+ `prerender: true` to see server rendering (right click on page and select "view source").
63
+
64
+ <%= react_component("HelloWorldApp", props: @hello_world_props, prerender: true) %>
65
+
66
+ Alternative steps to run the app:
67
+
68
+ - Run `rails s` to start the Rails server.
69
+
70
+ - Run bin/shakapacker-dev-server to start the Webpack dev server for compilation of Webpack
71
+ assets as soon as you save. This default setup with the dev server does not work
72
+ for server rendering
73
+
74
+ - Visit http://localhost:3000/hello_world and see your React On Rails app running!
75
+
76
+ - To turn on HMR, edit config/shakapacker.yml and set HMR to true. Restart the rails server
77
+ and bin/shakapacker-dev-server. Or use Procfile.dev.
78
+ MSG
79
+ end
40
80
  end
41
81
  end
@@ -29,6 +29,7 @@ module ReactOnRails
29
29
  if installation_prerequisites_met? || options.ignore_warnings?
30
30
  invoke_generators
31
31
  add_bin_scripts
32
+ add_post_install_message
32
33
  else
33
34
  error = "react_on_rails generator prerequisites not met!"
34
35
  GeneratorMessages.add_error(error)
@@ -52,6 +53,8 @@ module ReactOnRails
52
53
  else
53
54
  invoke "react_on_rails:react_no_redux"
54
55
  end
56
+
57
+ invoke "react_on_rails:adapt_for_older_shakapacker" unless using_shakapacker_7?
55
58
  end
56
59
 
57
60
  # NOTE: other requirements for existing files such as .gitignore or application.
@@ -89,6 +92,24 @@ module ReactOnRails
89
92
 
90
93
  File.chmod(0o755, *files_to_become_excutable)
91
94
  end
95
+
96
+ def add_post_install_message
97
+ message = GeneratorMessages.helpful_message_after_installation
98
+ unless using_shakapacker_7?
99
+ message = message.gsub("config/shakapacker", "config/webpacker")
100
+ message = message.gsub("bin/shakapacker", "bin/webpacker")
101
+ end
102
+
103
+ GeneratorMessages.add_info(message)
104
+ end
105
+
106
+ def using_shakapacker_7?
107
+ shakapacker_gem = Gem::Specification.find_by_name("shakapacker")
108
+ shakapacker_gem.version.segments.first == 7
109
+ rescue Gem::MissingSpecError
110
+ # In case using Webpacker
111
+ false
112
+ end
92
113
  end
93
114
  end
94
115
  end
@@ -1,5 +1,5 @@
1
1
  # Procfile for development using HMR
2
2
  # You can run these commands in separate shells
3
3
  rails: bundle exec rails s -p 3000
4
- wp-client: bin/webpacker-dev-server
5
- wp-server: SERVER_BUNDLE_ONLY=yes bin/webpacker --watch
4
+ wp-client: bin/shakapacker-dev-server
5
+ wp-server: SERVER_BUNDLE_ONLY=yes bin/shakapacker --watch
@@ -5,5 +5,5 @@ web: rails s -p 3000
5
5
  # When making frequent changes to client side assets, you will prefer building webpack assets
6
6
  # upon saving rather than when you refresh your browser page.
7
7
  # Note, if using React on Rails localization you will need to run
8
- # `bundle exec rake react_on_rails:locale` before you run bin/webpacker
9
- webpack: sh -c 'rm -rf public/packs/* || true && bin/webpacker -w'
8
+ # `bundle exec rake react_on_rails:locale` before you run bin/shakapacker
9
+ webpack: sh -c 'rm -rf public/packs/* || true && bin/shakapacker -w'
@@ -24,8 +24,8 @@ ReactOnRails.configure do |config|
24
24
  # to automatically refresh your webpack assets on every test run.
25
25
  #
26
26
  # Alternately, you can remove the `ReactOnRails::TestHelper.configure_rspec_to_compile_assets`
27
- # and set the config/webpacker.yml option for test to true.
28
- config.build_test_command = "RAILS_ENV=test bin/webpacker"
27
+ # and set the config/shakapacker.yml option for test to true.
28
+ config.build_test_command = "RAILS_ENV=test bin/shakapacker"
29
29
 
30
30
  ################################################################################
31
31
  ################################################################################
@@ -1,11 +1,11 @@
1
- # Note: You must restart bin/webpacker-dev-server for changes to take effect
1
+ # Note: You must restart bin/shakapacker-dev-server for changes to take effect
2
2
 
3
3
  default: &default
4
4
  source_path: app/javascript
5
5
  source_entry_path: packs
6
6
  public_root_path: public
7
7
  public_output_path: packs
8
- cache_path: tmp/webpacker
8
+ cache_path: tmp/shakapacker
9
9
  webpack_compile_output: true
10
10
 
11
11
  # Additional paths webpack should lookup modules
@@ -17,7 +17,7 @@ default: &default
17
17
 
18
18
  development:
19
19
  <<: *default
20
- # This is false since we're running `bin/webpacker -w` in Procfile.dev-setic
20
+ # This is false since we're running `bin/shakapacker -w` in Procfile.dev-setic
21
21
  compile: false
22
22
 
23
23
  # Reference: https://webpack.js.org/configuration/dev-server/
@@ -1,7 +1,9 @@
1
1
  <%= add_documentation_reference(config[:message], "// https://github.com/shakacode/react_on_rails_demo_ssr_hmr/blob/master/config/webpack/commonWebpackConfig.js") %>
2
2
 
3
3
  // Common configuration applying to client and server configuration
4
- const { webpackConfig: baseClientWebpackConfig, merge } = require('shakapacker');
4
+ const { generateWebpackConfig, merge } = require('shakapacker');
5
+
6
+ const baseClientWebpackConfig = generateWebpackConfig();
5
7
 
6
8
  const commonOptions = {
7
9
  resolve: {