diff --git a/CHANGELOG.md b/CHANGELOG.md index 5a74aa094..7a736026f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -16,9 +16,13 @@ Please follow the recommendations outlined at [keepachangelog.com](http://keepac Changes since last non-beta release. *Please add entries here for your pull requests that are not yet released.* +### [13.0.1] - 2022-02-09 +#### Improved +- Updated the default generator [PR 1431](https://github.com/shakacode/react_on_rails/pull/1431) by [justin808](https://github.com/justin808). + ### [13.0.0] - 2022-02-08 #### Breaking -- Removed webpacker as a dependency. Add gem Shakapacker to your project. +- Removed webpacker as a dependency. Add gem Shakapacker to your project, and update your package.json to also use shakapacker. #### Fixed - Propper throwing of exceptions. @@ -46,7 +50,7 @@ Changes since last non-beta release. - Supports Rails 7. #### Changed -- Changed logic of determining the usage of the default rails/webpacker webpack config or a custom command to only check if the config.build_production_command is defined. [PR 1402](https://github.com/shakacode/react_on_rails/pull/1402)by [justin808](https://github.com/justin808) and [gscarv13](https://github.com/gscarv13). +- Changed logic of determining the usage of the default rails/webpacker webpack config or a custom command to only check if the config.build_production_command is defined. [PR 1402](https://github.com/shakacode/react_on_rails/pull/1402) by [justin808](https://github.com/justin808) and [gscarv13](https://github.com/gscarv13). - Minimimum required Ruby is 2.7 to match lastest rails/webpacker. ### [12.4.0] - 2021-09-22 @@ -1006,7 +1010,9 @@ Best done with Object destructing: ##### Fixed - Fix several generator related issues. -[Unreleased]: https://github.com/shakacode/react_on_rails/compare/12.6.0...master +[Unreleased]: https://github.com/shakacode/react_on_rails/compare/13.0.1...master +[13.0.1]: https://github.com/shakacode/react_on_rails/compare/13.0.0...13.0.1 +[13.0.0]: https://github.com/shakacode/react_on_rails/compare/12.6.0...13.0.0 [12.6.0]: https://github.com/shakacode/react_on_rails/compare/12.5.2...12.6.0 [12.5.2]: https://github.com/shakacode/react_on_rails/compare/12.5.1...12.5.2 [12.5.1]: https://github.com/shakacode/react_on_rails/compare/12.5.0...12.5.1 diff --git a/NEWS.md b/NEWS.md index c4c79c999..1bc438d57 100644 --- a/NEWS.md +++ b/NEWS.md @@ -7,7 +7,7 @@ RR 474: React on Rails V12 – Don’t Shave That Yak! with Justin Gordon](https * **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_tutorial_with_ssr_and_hmr_fast_refresh) for a new way to setup the creation of your SSR bundle with `rails/webpacker`. +* **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**. 1. **React Hooks Support** for top level components 2. **Typescript bindings** diff --git a/README.md b/README.md index c9abb96d5..80e149be3 100644 --- a/README.md +++ b/README.md @@ -13,7 +13,7 @@ # News * ShakaCode now maintains the official successor to `rails/webpacker`, [`shakapacker`](https://github.com/shakacode/shakapacker). -* Project is updated to support Rails 7! +* Project is updated to support Rails 7 and Shakapacker v6+! ----- @@ -44,12 +44,12 @@ To provide a high performance framework for integrating Ruby on Rails with React Given that `rails/webpacker` gem already provides basic React integration, why would you use "React on Rails"? 1. Easy passing of props directly from your Rails view to your React components rather than having your Rails view load and then make a separate request to your API. -1. Tight integration with [rails/webpacker](https://github.com/rails/webpacker). -1. Server-Side Rendering (SSR), often used for SEO crawler indexing and UX performance, is not offered by `rails/webpacker`. +1. Tight integration with [shakapacker](https://github.com/shakacode/shakapacker) (or it's predecessor [rails/webpacker](https://github.com/rails/webpacker]. +1. Server-Side Rendering (SSR), often used for SEO crawler indexing and UX performance. 1. [Redux](https://github.com/reactjs/redux) and [React Router](https://github.com/ReactTraining/react-router#readme) integration with server-side-rendering. 1. [Internationalization (I18n) and (localization)](https://www.shakacode.com/react-on-rails/docs/guides/i18n) 1. A supportive community. This [web search shows how live public sites are using React on Rails](https://publicwww.com/websites/%22react-on-rails%22++-undeveloped.com+depth%3Aall/). -1. [Reason ML Support](https://github.com/shakacode/reason-react-on-rails-example). +1. [ReScript Support](https://github.com/shakacode/rescript-react-on-rails-example). See [Rails/Webpacker React Integration Options](https://www.shakacode.com/react-on-rails/docs/guides/rails-webpacker-react-integration-options) for comparisons to other gems. diff --git a/docs/additional-details/recommended-project-structure.md b/docs/additional-details/recommended-project-structure.md index acf77f258..6ed1ba5c5 100644 --- a/docs/additional-details/recommended-project-structure.md +++ b/docs/additional-details/recommended-project-structure.md @@ -12,7 +12,7 @@ app/javascript: │ └── hello-world-bundle.js ``` -Per the example repo [shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh](https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh), +Per the example repo [shakacode/react_on_rails_demo_ssr_hmr](https://github.com/shakacode/react_on_rails_demo_ssr_hmr), you should consider keeping your codebase mostly consistent with the defaults for [rails/webpacker](https://github.com/rails/webpacker). ## Steps to convert from the generator defaults to use a `/client` directory for source code diff --git a/docs/guides/rails-webpacker-react-integration-options.md b/docs/guides/rails-webpacker-react-integration-options.md index d62ef4c05..2a05ed573 100644 --- a/docs/guides/rails-webpacker-react-integration-options.md +++ b/docs/guides/rails-webpacker-react-integration-options.md @@ -1,4 +1,4 @@ -# Rails/Webpacker React Integration Options +# Shakapacker (Rails/Webpacker) React Integration Options You only _need_ props hydration if you need SSR. However, there's no good reason to have your app make a second round trip to the Rails server to get initialization props. @@ -81,7 +81,7 @@ Webpack's HMR allows the replacement of modules for React in-place without reloa ### React Refresh Webpack Plugin [github.com/pmmmwh/react-refresh-webpack-plugin](https://github.com/pmmmwh/react-refresh-webpack-plugin) -You can see an example commit of adding this [here](https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh/commit/7e53803fce7034f5ecff335db1f400a5743a87e7). +You can see an example commit of adding this [here](https://github.com/shakacode/react_on_rails_demo_ssr_hmr/commit/7e53803fce7034f5ecff335db1f400a5743a87e7). 1. Add react refresh packages: `yarn add @pmmmwh/react-refresh-webpack-plugin react-refresh -D` @@ -111,6 +111,8 @@ You can see an example commit of adding this [here](https://github.com/shakacode } ``` +--- + ### React Hot Loader (Deprecated) 1. Add the `react-hot-loader` and ` @hot-loader/react-dom` npm packages. @@ -179,4 +181,3 @@ module.exports = environment.toWebpackConfig() module.exports = environment; ``` - diff --git a/docs/guides/react-server-rendering.md b/docs/guides/react-server-rendering.md index a0cee3359..7e1708087 100644 --- a/docs/guides/react-server-rendering.md +++ b/docs/guides/react-server-rendering.md @@ -3,7 +3,7 @@ See also [Client vs. Server Rendering](https://www.shakacode.com/react-on-rails/docs/guides/client-vs-server-rendering/). ## What is the easiest way to setup a webpack configuration for server-side-rendering? -See the example webpack setup here: [github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh](https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh). +See the example webpack setup here: [github.com/shakacode/react_on_rails_demo_ssr_hmr](https://github.com/shakacode/react_on_rails_demo_ssr_hmr). ## What is Server Rendering? diff --git a/docs/guides/tutorial.md b/docs/guides/tutorial.md index 781be6784..1faf74a3f 100644 --- a/docs/guides/tutorial.md +++ b/docs/guides/tutorial.md @@ -1,10 +1,10 @@ # React on Rails Basic Tutorial -**November 11, 2020**: See the example repo of [React on Rails Tutorial With SSR, HMR fast refresh, and TypeScript](https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh) for a new way to setup the creation of your SSR bundle with `rails/webpacker`. This file will be update shortly. Most of it is still relevant. +_Also 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)_ ----- -*Updated for Ruby 2.7.1, Rails 6.0.3.1, React on Rails v12.5.0, and Shakapacker v6* +*Updated for Ruby 2.7, Rails 7, React on Rails v13, and Shakapacker v6* This tutorial guides you through setting up a new or existing Rails app with **React on Rails**, demonstrating Rails + React + Redux + Server Rendering. @@ -23,7 +23,7 @@ By the time you read this, the latest may have changed. Be sure to check the ver ## Setting up your environment -Trying out **React on Rails** is super easy, so long as you have the basic prerequisites. This includes the basics for Rails 6.x and node version 14+. I recommend `rvm` or `rbevn` and `nvm` to install Ruby and Node. Rails can be installed as an ordinary gem. +Trying out **React on Rails** is super easy, so long as you have the basic prerequisites. This includes the basics for Rails 6.x and node version 14+. I recommend `rvm` or `rbenv` and `nvm` to install Ruby and Node. Rails can be installed as an ordinary gem. ``` nvm install node # download and install latest stable Node @@ -49,6 +49,7 @@ cd # Any name you like for the rails app # Skip javascript so will add that next and get the current version +# This is for Rails 7 rails new --skip-turbolinks --skip-javascript test-react-on-rails cd test-react-on-rails @@ -60,7 +61,7 @@ of both the gem and npm package. In other words, don't use the `^` or `~` in the _Use the latest version for `react_on_rails` and `shakapacker`._ ``` -gem 'react_on_rails', '13.0.0' # prefer exact gem version to match npm version +gem 'react_on_rails', '13.0.1' # prefer exact gem version to match npm version gem 'shakapacker', '6.1.1' # prefer exact gem version to match npm version ``` @@ -68,7 +69,7 @@ gem 'shakapacker', '6.1.1' # prefer exact gem version to match npm v Note: The 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. -## Run the webpacker (shakapacker) generator +## Run the shakapacker (webpacker) generator ```terminal bundle exec rails webpacker:install diff --git a/docs/guides/webpack-configuration.md b/docs/guides/webpack-configuration.md index a36a9f28d..97ae2c1f5 100644 --- a/docs/guides/webpack-configuration.md +++ b/docs/guides/webpack-configuration.md @@ -11,7 +11,7 @@ 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) -Per the example repo [shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh](https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh), +Per the example repo [shakacode/react_on_rails_demo_ssr_hmr](https://github.com/shakacode/react_on_rails_demo_ssr_hmr), you should consider keeping your codebase mostly consistent with the defaults for [rails/webpacker](https://github.com/rails/webpacker). # React on Rails diff --git a/docs/home.md b/docs/home.md index 48c6259c0..fad44d2cf 100644 --- a/docs/home.md +++ b/docs/home.md @@ -16,7 +16,7 @@ ## Example Apps 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 that supports SSR. -2. Example repo of [React on Rails Tutorial With SSR, HMR fast refresh, and TypeScript](https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh) for a new way to setup the creation of your SSR bundle with `rails/webpacker`. +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`. 3. Live, [open source](https://github.com/shakacode/react-webpack-rails-tutorial), example of this gem, see [reactrails.com](http://reactrails.com). # Other Resources diff --git a/lib/generators/react_on_rails/templates/base/base/babel.config.js.tt b/lib/generators/react_on_rails/templates/base/base/babel.config.js.tt index c5fe728a4..400d0359e 100644 --- a/lib/generators/react_on_rails/templates/base/base/babel.config.js.tt +++ b/lib/generators/react_on_rails/templates/base/base/babel.config.js.tt @@ -1,4 +1,4 @@ -<%= add_documentation_reference(config[:message], "// https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh/blob/master/babel.config.js") %> +<%= add_documentation_reference(config[:message], "// https://github.com/shakacode/react_on_rails_demo_ssr_hmr/blob/master/babel.config.js") %> module.exports = function (api) { const defaultConfigFunc = require('shakapacker/package/babel/preset.js') diff --git a/lib/generators/react_on_rails/templates/base/base/config/webpack/clientWebpackConfig.js.tt b/lib/generators/react_on_rails/templates/base/base/config/webpack/clientWebpackConfig.js.tt index 06db86fc6..6741f40a8 100644 --- a/lib/generators/react_on_rails/templates/base/base/config/webpack/clientWebpackConfig.js.tt +++ b/lib/generators/react_on_rails/templates/base/base/config/webpack/clientWebpackConfig.js.tt @@ -1,4 +1,4 @@ -<%= add_documentation_reference(config[:message], "// https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh/blob/master/config/webpack/clientWebpackConfig.js") %> +<%= add_documentation_reference(config[:message], "// https://github.com/shakacode/react_on_rails_demo_ssr_hmr/blob/master/config/webpack/clientWebpackConfig.js") %> const commonWebpackConfig = require('./commonWebpackConfig'); diff --git a/lib/generators/react_on_rails/templates/base/base/config/webpack/commonWebpackConfig.js.tt b/lib/generators/react_on_rails/templates/base/base/config/webpack/commonWebpackConfig.js.tt index 5a7a7adec..3094c1334 100644 --- a/lib/generators/react_on_rails/templates/base/base/config/webpack/commonWebpackConfig.js.tt +++ b/lib/generators/react_on_rails/templates/base/base/config/webpack/commonWebpackConfig.js.tt @@ -1,4 +1,4 @@ -<%= add_documentation_reference(config[:message], "// https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh/blob/master/config/webpack/commonWebpackConfig.js") %> +<%= add_documentation_reference(config[:message], "// https://github.com/shakacode/react_on_rails_demo_ssr_hmr/blob/master/config/webpack/commonWebpackConfig.js") %> // Common configuration applying to client and server configuration const { webpackConfig: baseClientWebpackConfig, merge } = require('shakapacker'); diff --git a/lib/generators/react_on_rails/templates/base/base/config/webpack/development.js.tt b/lib/generators/react_on_rails/templates/base/base/config/webpack/development.js.tt index 605fdcb02..d2c1ae469 100644 --- a/lib/generators/react_on_rails/templates/base/base/config/webpack/development.js.tt +++ b/lib/generators/react_on_rails/templates/base/base/config/webpack/development.js.tt @@ -1,4 +1,4 @@ -<%= add_documentation_reference(config[:message], "// https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh/blob/master/config/webpack/development.js") %> +<%= add_documentation_reference(config[:message], "// https://github.com/shakacode/react_on_rails_demo_ssr_hmr/blob/master/config/webpack/development.js") %> const { devServer, inliningCss } = require('shakapacker'); diff --git a/lib/generators/react_on_rails/templates/base/base/config/webpack/production.js.tt b/lib/generators/react_on_rails/templates/base/base/config/webpack/production.js.tt index 15976fc03..2dbea0e01 100644 --- a/lib/generators/react_on_rails/templates/base/base/config/webpack/production.js.tt +++ b/lib/generators/react_on_rails/templates/base/base/config/webpack/production.js.tt @@ -1,4 +1,4 @@ -<%= add_documentation_reference(config[:message], "// https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh/blob/master/config/webpack/production.js") %> +<%= add_documentation_reference(config[:message], "// https://github.com/shakacode/react_on_rails_demo_ssr_hmr/blob/master/config/webpack/production.js") %> const webpackConfig = require('./webpackConfig'); diff --git a/lib/generators/react_on_rails/templates/base/base/config/webpack/serverWebpackConfig.js.tt b/lib/generators/react_on_rails/templates/base/base/config/webpack/serverWebpackConfig.js.tt index 99bd644af..a1f40f065 100644 --- a/lib/generators/react_on_rails/templates/base/base/config/webpack/serverWebpackConfig.js.tt +++ b/lib/generators/react_on_rails/templates/base/base/config/webpack/serverWebpackConfig.js.tt @@ -1,4 +1,4 @@ -<%= add_documentation_reference(config[:message], "// https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh/blob/master/config/webpack/serverWebpackConfig.js") %> +<%= add_documentation_reference(config[:message], "// https://github.com/shakacode/react_on_rails_demo_ssr_hmr/blob/master/config/webpack/serverWebpackConfig.js") %> const { merge, config } = require('shakapacker'); const commonWebpackConfig = require('./commonWebpackConfig'); diff --git a/lib/generators/react_on_rails/templates/base/base/config/webpack/test.js.tt b/lib/generators/react_on_rails/templates/base/base/config/webpack/test.js.tt index 3cc63078d..9eae93217 100644 --- a/lib/generators/react_on_rails/templates/base/base/config/webpack/test.js.tt +++ b/lib/generators/react_on_rails/templates/base/base/config/webpack/test.js.tt @@ -1,6 +1,9 @@ -<%= add_documentation_reference(config[:message], "// https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh/blob/master/config/webpack/development.js") %> +<%= add_documentation_reference(config[:message], "// https://github.com/shakacode/react_on_rails_demo_ssr_hmr/blob/master/config/webpack/test.js") %> -// Use dev -const config = require('./development'); +const webpackConfig = require('./webpackConfig') -module.exports = config; +const testOnly = (_clientWebpackConfig, _serverWebpackConfig) => { + // place any code here that is for test only +} + +module.exports = webpackConfig(testOnly) diff --git a/lib/generators/react_on_rails/templates/base/base/config/webpack/webpackConfig.js.tt b/lib/generators/react_on_rails/templates/base/base/config/webpack/webpackConfig.js.tt index d4b2b3837..8c1a94004 100644 --- a/lib/generators/react_on_rails/templates/base/base/config/webpack/webpackConfig.js.tt +++ b/lib/generators/react_on_rails/templates/base/base/config/webpack/webpackConfig.js.tt @@ -1,4 +1,4 @@ -<%= add_documentation_reference(config[:message], "// https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh/blob/master/config/webpack/webpackConfig.js") %> +<%= add_documentation_reference(config[:message], "// https://github.com/shakacode/react_on_rails_demo_ssr_hmr/blob/master/config/webpack/webpackConfig.js") %> const clientWebpackConfig = require('./clientWebpackConfig'); const serverWebpackConfig = require('./serverWebpackConfig');