Misc readability changes

Author: alexeyr

.github/workflows/main.yml

@@ -79,7 +79,7 @@ jobs:
         run: cd spec/dummy && rm -rf public/webpack/test && yarn run build:rescript && RAILS_ENV="test" NODE_ENV="test" bin/${{ matrix.versions == 'oldest' && 'web' || 'shaka' }}packer
       - id: get-sha
         run: echo "sha=\"$(git rev-parse HEAD)\"" >> "$GITHUB_OUTPUT"
-      - name: Save test webpack bundles to cache (for build number checksum used by rspec job)
+      - name: Save test Webpack bundles to cache (for build number checksum used by RSpec job)
         uses: actions/cache/save@v4
         with:
           path: spec/dummy/public/webpack
@@ -139,7 +139,7 @@ jobs:
           key: dummy-app-node-modules-cache-${{ hashFiles('spec/dummy/package.json') }}-${{ matrix.versions }}
       - id: get-sha
         run: echo "sha=\"$(git rev-parse HEAD)\"" >> "$GITHUB_OUTPUT"
-      - name: Save test webpack bundles to cache (for build number checksum used by rspec job)
+      - name: Save test Webpack bundles to cache (for build number checksum used by RSpec job)
         uses: actions/cache@v4
         with:
           path: spec/dummy/public/webpack

CHANGELOG.md

@@ -55,7 +55,7 @@ See [Release Notes](docs/release-notes/15.0.0.md) for full details.
 
 #### Fixed
 
-- Separated streamServerRenderedReactComponent from the ReactOnRails object in order to stop users from getting errors during webpack compilation about needing the `stream-browserify` package. [PR 1680](https://github.com/shakacode/react_on_rails/pull/1680) by [judahmeek](https://github.com/judahmeek).
+- Separated streamServerRenderedReactComponent from the ReactOnRails object in order to stop users from getting errors during Webpack compilation about needing the `stream-browserify` package. [PR 1680](https://github.com/shakacode/react_on_rails/pull/1680) by [judahmeek](https://github.com/judahmeek).
 - Removed obsolete `js-yaml` peer dependency. [PR 1678](https://github.com/shakacode/react_on_rails/pull/1678) by [alexeyr-ci](https://github.com/alexeyr-ci).
 
 ### [14.1.0] - 2025-01-06

NEWS.md

@@ -5,7 +5,7 @@ _A history of the news. A few bullets at the top will also show on the [README.m
 - **October 14, 2020**: [RUBY ROGUES
   RR 474: React on Rails V12 – Don’t Shave That Yak! with Justin Gordon](https://devchat.tv/ruby-rogues/rr-474-react-on-rails-v12-dont-shave-that-yak-with-justin-gordon/).
 
-- **October 1, 2020**: See the [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
+- **October 1, 2020**: See the [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
   that supports SSR.
 - **August 2, 2020**: See the example repo of [React on Rails Tutorial With SSR, HMR fast refresh, and TypeScript](https://github.com/shakacode/react_on_rails_demo_ssr_hmr) for a new way to setup the creation of your SSR bundle with `rails/webpacker`.
 - July 8, 2020: Release **v12**.
@@ -23,7 +23,7 @@ _A history of the news. A few bullets at the top will also show on the [README.m
 - 2017-03-06: Updated to Webpack v2!
 - 2017-03-02: Demo of internationalization (i18n) is live at [reactrails.com](https://www.reactrails.com/). Docs [here](docs/guides/i18n.md).
 - 2017-02-28: See [discussions here on Webpacker](https://github.com/rails/webpacker/issues/139) regarding how Webpacker will allow React on Rails to avoid using the asset pipeline in the near future.
-- 2017-02-28: Upgrade to Webpack v2 or use the `--bail` option in your webpack script for test and production builds. See the discussion on [PR #730](https://github.com/shakacode/react_on_rails/pull/730).
+- 2017-02-28: Upgrade to Webpack v2 or use the `--bail` option in your Webpack script for test and production builds. See the discussion on [PR #730](https://github.com/shakacode/react_on_rails/pull/730).
 - 2016-11-03: Spoke at [LA Ruby: "React on Rails: Why, What, and How?"](http://www.meetup.com/laruby/events/234825187/). [Video and pictures in this article](https://blog.shakacode.com/my-react-on-rails-talk-at-the-la-ruby-rails-meetup-november-10-2016-eaaa83aff800#.ej6h4eglp).
 - 2016-12-20: New Video on Egghead.io: [Creating a component with React on Rails](https://egghead.io/lessons/react-creating-a-component-with-react-on-rails)
 - 2016-11-03: Spoke at [LA Ruby, 7pm, Thursday, November 10 in Venice, CA: "React on Rails: Why, What, and How?"](http://www.meetup.com/laruby/events/234825187/). [Video and pictures in this article](https://blog.shakacode.com/my-react-on-rails-talk-at-the-la-ruby-rails-meetup-november-10-2016-eaaa83aff800#.ej6h4eglp).
@@ -58,5 +58,5 @@ _A history of the news. A few bullets at the top will also show on the [README.m
   1. Fixed a **critical** problem with TurboLinks. Be sure to see [turbolinks docs](docs/additional-reading/turbolinks.md) for more information on how to debug TurboLinks issues.
   2. Provides a convenient helper to ensure that JavaScript assets are compiled before running tests.
 - React on Rails does not yet have _generator_ support for building new apps that use CSS modules and hot reloading via the Rails server as is demonstrated in the [shakacode/react-webpack-rails-tutorial](https://github.com/shakacode/react-webpack-rails-tutorial/). _We do support this, but we don't generate the code._ If you did generate a fresh app from react_on_rails and want to move to CSS Modules, then see [PR 175: Babel 6 / CSS Modules / Rails hot reloading](https://github.com/shakacode/react-webpack-rails-tutorial/pull/175). Note, while there are probably fixes after this PR was accepted, this has the majority of the changes. See [the tutorial](https://github.com/shakacode/react-webpack-rails-tutorial/#news) for more information. Ping us if you want to help!
-- [ShakaCode](http://www.shakacode.com) is doing Skype plus Slack/Github based coaching for "React on Rails". [Click here](http://www.shakacode.com/work/index.html) for more information.
+- [ShakaCode](http://www.shakacode.com) is doing Skype plus Slack/GitHub based coaching for "React on Rails". [Click here](http://www.shakacode.com/work/index.html) for more information.
 - Be sure to read our article [The React on Rails Doctrine](https://medium.com/@railsonmaui/the-react-on-rails-doctrine-3c59a778c724).

README.md

@@ -44,7 +44,7 @@ If you think ShakaCode can help your project, [click here](https://meetings.hubs
 
 ## React on Rails Pro
 
-Are you interested in optimizing your webpack setup for React on Rails, including code splitting with [react-router](https://github.com/ReactTraining/react-router#readme) and [loadable-components](https://loadable-components.com/) with server-side rendering for SEO and hot-reloading for developers?
+Are you interested in optimizing your Webpack setup for React on Rails, including code splitting with [react-router](https://github.com/ReactTraining/react-router#readme) and [loadable-components](https://loadable-components.com/) with server-side rendering for SEO and hot-reloading for developers?
 We did this for Popmenu, [lowering Heroku costs 20-25% while getting a 73% decrease in average response times](https://www.shakacode.com/recent-work/popmenu/). Several years later, Popmenu serves tens of millions of SSR requests daily with React on Rails Pro.
 
 If you're interested, read more about [React on Rails Pro](https://www.shakacode.com/react-on-rails-pro/) and [book a call](https://meetings.hubspot.com/justingordon/30-minute-consultation).
@@ -94,12 +94,12 @@ Ruby on Rails >=5, rails/webpacker >= 4.2 or shakapacker > 6, Ruby >= 3.0.0
 
 - [Click to join **React + Rails Slack**](https://reactrails.slack.com/join/shared_invite/enQtNjY3NTczMjczNzYxLTlmYjdiZmY3MTVlMzU2YWE0OWM0MzNiZDI0MzdkZGFiZTFkYTFkOGVjODBmOWEyYWQ3MzA2NGE1YWJjNmVlMGE).
 
-* [**Subscribe**](https://app.mailerlite.com/webforms/landing/l1d9x5) for announcements of new releases of React on Rails and of our latest [blog articles](https://blog.shakacode.com) and tutorials.
-* [Discussions](https://github.com/shakacode/react_on_rails/discussions): Post your questions regarding React on Rails
-* **[forum.shakacode.com](https://forum.shakacode.com)**: Other discussions
-* **[@railsonmaui on Twitter](https://twitter.com/railsonmaui)**
-* _See [NEWS.md](https://github.com/shakacode/react_on_rails/tree/master/NEWS.md) for more notes over time._
-* See [Projects](https://github.com/shakacode/react_on_rails/tree/master/PROJECTS.md) using and [KUDOS](https://github.com/shakacode/react_on_rails/tree/master/KUDOS.md) for React on Rails. Please submit yours! Please edit either page or [email us](mailto:[email protected]) and we'll add your info. We also **love stars** as it helps us attract new users and contributors.
+- [**Subscribe**](https://app.mailerlite.com/webforms/landing/l1d9x5) for announcements of new releases of React on Rails and of our latest [blog articles](https://blog.shakacode.com) and tutorials.
+- [Discussions](https://github.com/shakacode/react_on_rails/discussions): Post your questions regarding React on Rails
+- **[forum.shakacode.com](https://forum.shakacode.com)**: Other discussions
+- **[@railsonmaui on Twitter](https://twitter.com/railsonmaui)**
+- _See [NEWS.md](https://github.com/shakacode/react_on_rails/tree/master/NEWS.md) for more notes over time._
+- See [Projects](https://github.com/shakacode/react_on_rails/tree/master/PROJECTS.md) using and [KUDOS](https://github.com/shakacode/react_on_rails/tree/master/KUDOS.md) for React on Rails. Please submit yours! Please edit either page or [email us](mailto:[email protected]) and we'll add your info. We also **love stars** as it helps us attract new users and contributors.
 
 ## Contributing
 

docs/additional-details/generator-details.md

@@ -41,13 +41,13 @@ Another good option is to create a simple test app per the [Tutorial](https://ww
 
 # Understanding the Organization of the Generated Client Code
 
-The generated client code follows our organization scheme. Each unique set of functionality, is given its own folder inside of `app/javascript/app/bundles`. Note, the recommended for bigger projects is `client/app/bundles`. This encourages for modularity of _domains_.
+The generated client code follows our organization scheme. Each unique set of functionality is given its own folder inside of `app/javascript/app/bundles`. This encourages modularity of _domains_.
 
-Inside of the generated "HelloWorld" domain you will find the following folders:
+Inside the generated "HelloWorld" domain you will find the following folders:
 
-- `startup`: This contains the entry point files for webpack. It defaults to a single file that is used for server and client compilation, but if these need to be different, then you can create two webpack configurations with separate endpoints.
-- `containers`: "smart components" (components that have functionality and logic that is passed to child "dumb components").
-- `components`: includes "dumb components", or components that simply render their properties and call functions given to them as properties by a parent component. Ultimately, at least one of these dumb components will have a parent container component.
+- `startup`: contains the entry point files for webpack. It defaults to a single file that is used for both server and client compilation. But if these need to be different, then you can create two Webpack configurations with separate endpoints. Since RoR v14.2 this is strongly recommended because the client can import `react-on-rails/client` instead of `react-on-rails` for decreased bundle size.
+- `containers`: contains "smart components" (components that have functionality and logic that is passed to child "dumb components").
+- `components`: contains "dumb components", or components that simply render their properties and call functions given to them as properties by a parent component. Ultimately, at least one of these dumb components will have a parent container component.
 
 You may also notice the `app/lib` folder. This is for any code that is common between bundles and therefore needs to be shared (for example, middleware).
 

docs/additional-details/manual-installation-overview.md

@@ -15,14 +15,14 @@ The only requirements within this directory for basic React on Rails integration
    1. Provide server rendering if you wish to use that feature.
 1. Your JavaScript code "registers" any components and stores per the ReactOnRails APIs of ReactOnRails.register(components) and ReactOnRails.registerStore(stores). See [our javascript API docs](https://www.shakacode.com/react-on-rails/docs/api/javascript-api/) and the [ReactOnRails.js source](https://github.com/shakacode/react_on_rails/tree/master/node_package/src/ReactOnRails.js).
 1. Set your registration file as an "entry" point in your Webpack configs.
-1. You create scripts in `client/package.json` per the example apps. These are used for building your Webpack assets. Also do this for your top level `package.json`.
+1. You create scripts in `client/package.json` per the example apps. These are used for building your Webpack assets. Also do this for your top-level `package.json`.
 
 ## Rails Steps (outside of /client)
 
-1. Add `gem "webpacker"` to the Gemfile, run bundle. The gem provides the `stylesheet_pack_tag` and `javascript_pack_tag` helpers which is used to load the bundled assets to your layouts.[Dummy Example](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/app/views/layouts/application.html.erb)
+1. Add `gem "shakapacker"` to the Gemfile, run `bundle`. The gem provides the `stylesheet_pack_tag` and `javascript_pack_tag` helpers, which are used to load the bundled assets to your layouts. [Dummy Example](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/app/views/layouts/application.html.erb).
 1. Configure the `config/initializers/react_on_rails.rb`. You can adjust some necessary settings and defaults. See file [https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/config/initializers/react_on_rails.rb](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/config/initializers/react_on_rails.rb) for a detailed example of configuration, including comments on the different values to configure.
 1. Configure your Procfiles per the example apps. These are at the root of your Rails installation.
-1. Configure your top level JavaScript files for inclusion in your layout. You'll want a version that you use for static assets, and you want a file for any files in your setup that are not part of your webpack build. The reason for this is for use with hot-reloading. If you are not using hot reloading, then you only need to configure your `application.js` file to include your Webpack generated files.
-1. If you are deploying to Heroku, see [our heroku deployment documentation](https://www.shakacode.com/react-on-rails/docs/deployment/heroku-deployment/)
+1. Configure your top-level JavaScript files for inclusion in your layout. You'll want a version that you use for static assets, and a separate file for any files in your setup that are not part of your Webpack build. The reason for this is for use with hot reloading. If you are not using hot reloading, then you only need to configure your `application.js` file to include your Webpack generated files.
+1. If you are deploying to Heroku, see [our Heroku deployment documentation](https://www.shakacode.com/react-on-rails/docs/deployment/heroku-deployment/).
 
 If I missed anything, please submit a PR or file an issue.

docs/additional-details/recommended-project-structure.md

@@ -2,13 +2,13 @@
 
 The React on Rails generator uses the standard Shakapacker convention of this structure:
 
-```yml
+```text
 app/javascript:
   ├── bundles:
-  │   # Logical groups of files that can be used for code splitting
+  │   # Logical groups of files that can be used for code splitting
   │   └── hello-world-bundle.js
   ├── packs:
-  │   # only webpack entry files here
+  │   # only webpack entry files here
   │   └── hello-world-bundle.js
 ```
 
@@ -19,7 +19,7 @@ you should consider keeping your codebase mostly consistent with the defaults fo
 
 1. Move the directory:
 
-```
+```sh
 mv app/javascript client
 ```
 
@@ -35,7 +35,7 @@ Shakapacker probably doesn't support having your main node_modules directory und
 
 1. Move the `/package.json` to `/client/package.json`
 2. Create a `/package.json` that delegates to `/client/package.json`.
-   ```
+   ```json
      "scripts": {
        "heroku-postbuild": "cd ./client && yarn"
      },
@@ -45,19 +45,19 @@ Shakapacker probably doesn't support having your main node_modules directory und
 
 ## CSS, Sass, Fonts, and Images
 
-Should you move your styling assets to Webpack? Or stick with the plain Rails asset pipeline. It depends!
+Should you move your styling assets to Webpack, or stick with the plain Rails asset pipeline? It depends!
 
 Here's a good discussion of this option: [Why does Rails 6 include both Webpacker and Sprockets?](https://rossta.net/blog/why-does-rails-install-both-webpacker-and-sprockets.html).
 
 You have 2 basic choices:
 
 ### Simple Rails Way
 
-This isn't really any technique, as you keep handling all your styling assets using Rails standard tools, such as using the [sass-rails gem](https://rubygems.org/gems/sass-rails/versions/5.0.4). Basically, Webpack doesn't get involved with styling. Your Rails layouts just doing the styling the standard Rails way.
+This isn't really a technique, as you keep handling all your styling assets using Rails standard tools, such as using the [sass-rails gem](https://rubygems.org/gems/sass-rails/versions/5.0.4). Basically, Webpack doesn't get involved with styling. Your Rails layouts just continue doing the styling the standard Rails way.
 
 #### Advantages to the Simple Rails Way
 
-1. Much simpler! There's no changes really from your current processes.
+1. Much simpler! There's no change from your current processes.
 
 ### Using Webpack to Manage Styling Assets
 
@@ -70,6 +70,6 @@ This technique involves customization of the webpack config files to generate CS
 
 #### Advantages to having Webpack Manage Styles
 
-1. You can use [CSS modules](https://github.com/css-modules/css-modules), which is super compelling once you seen the benefits.
+1. You can use [CSS modules](https://github.com/css-modules/css-modules), which is super compelling once you see the benefits.
 1. You can use CSS in JS.
 1. You can do hot reloading of your assets. Thus, you do not have to refresh your web page to see asset change, including changing styles.

docs/additional-details/updating-dependencies.md

@@ -1,6 +1,6 @@
 # Updating Dependencies
 
-If you frequently update you dependencies in small batches, you will avoid large and painful updates later. Then again, if you don't have good tests coverage, it's hazardous to update dependencies at any time.
+If you frequently update dependencies in small batches, you will avoid large and painful updates later. Then again, if you don't have good test coverage, it's hazardous to update dependencies at any time.
 
 ## Ruby
 
@@ -16,16 +16,16 @@ bundle update
 1. Run `yarn outdated` and read CHANGELOGs of major updated packages before you update. You might not be ready for some updates.
 1. Run these commands. You may or may not need to `rm -rf` your `node_modules` directory.
 
-```
-cd client
-ncu -u -a
-yarn
-```
+   ```bash
+   cd client
+   ncu -u -a
+   yarn
+   ```
 
 Some combinations that I often run:
 
-### remove old installed `node_modules` so you only get what corresponds to package.json
+- remove old installed `node_modules` so you only get what corresponds to `package.json`:
 
-```
-ncu -u -a && rm -rf node_modules && yarn
-```
+  ```bash
+  ncu -u -a && rm -rf node_modules && yarn
+  ```