React on Rails v9 on rails/webpacker v3

* See CHANGELOG.md for summary of changes
* Change webpack-bundle to hello-world-bundle

See https://github.com/shakacode/react-on-rails-v9-rc-generator/pulls
for examples of new generator output.

* Remove gen examples optimizations for spec
  Older optimizations were for times npm was super slow.

Author: justin808

.eslintignore

@@ -13,3 +13,4 @@ node_package/webpack.config.js
 **/app/assets/javascripts/application.js
 **/coverage/**
 **/cable.js
+**/public/packs*/*

CHANGELOG.md

@@ -8,26 +8,143 @@ Changes since last non-beta release.
 
 *Please add entries here for your pull requests.*
 
-### [9.0.0.beta.1]
-- Switch over to using Webpacker
+- Fix regression where `react_component(... prerender: true)` wouldn't find the generated asset bundle, because it wasn't looking for the hashed path.
 
-- If using the WebpackConfigLoader, you will need to rename the following object properties:
-  - hotReloadingUrl       devServerUrl         
-  - hotReloadingHostname  devServerHost        
-  - hotReloadingPort      devServerPort
 
-- Find your webpacker_lite.yml and rename it to webpacker.yml
+## 9.0 from 8.x. Upgrade Instructions
+All 9.0.0 beta versions can be viewed in [PR 908](https://github.com/shakacode/react_on_rails/pull/908)
+
+For an example of upgrading, see [react-webpack-rails-tutorial/pull/416](https://github.com/shakacode/react-webpack-rails-tutorial/pull/416).
+
+- Breaking Configuration Changes
+  1. Added `config.node_modules_location` which defaults to `""` if Webpacker is installed. You may want to set this to 'client'` to `config/initializers/react_on_rails.rb` to keep your node_modules inside of `/client`
+  2. Renamed
+   * config.npm_build_test_command ==> config.build_test_command
+   * config.build_production_command ==> config.build_production_command
+
+- Update the gemfile. Switch over to using the webpacker gem.
+
+```rb
+gem "webpacker"
+```
+
+- Update for the renaming in the `WebpackConfigLoader` in your webpack configuration.
+  You will need to rename the following object properties:
+  - webpackOutputPath      ==> output.path
+  - webpackPublicOutputDir ==> output.publicPath
+  - hotReloadingUrl        ==> output.publicPathWithHost
+  - hotReloadingHostname   ==> settings.dev_server.host
+  - hotReloadingPort       ==> settings.dev_server.port
+  - hmr                    ==> settings.dev_server.hmr
+  - manifest               ==> Remove this one. We use the default for Webpack of manifest.json
+  - env                    ==> Use `const { env } = require('process');`
+  - devBuild               ==> Use `const devBuild = process.env.NODE_ENV !== 'production';`
+ 
+- Edit your Webpack.config files:
+  - Change your Webpack output to be like:
+    ```
+    const webpackConfigLoader = require('react-on-rails/webpackConfigLoader');
+    const configPath = resolve('..', 'config');
+    const { output, settings } = webpackConfigLoader(configPath);
+    const hmr = settings.dev_server.hmr;
+    const devBuild = process.env.NODE_ENV !== 'production';
+
+    output: {
+      filename: isHMR ? '[name]-[hash].js' : '[name]-[chunkhash].js',
+      chunkFilename: '[name]-[chunkhash].chunk.js',
+   
+      publicPath: output.publicPath,
+      path: output.path,
+    },
+    ```
+  - Change your ManifestPlugin definition to something like the following
+    ```
+    new ManifestPlugin({
+        publicPath: output.publicPath,
+        writeToFileEmit: true
+      }),
+
+    ```
+
+- Find your `webpacker_lite.yml` and rename it to `webpacker.yml`
+  - Consider copying a default webpacker.yml setup such as https://github.com/shakacode/react-on-rails-v9-rc-generator/blob/master/config/webpacker.yml
+  - If you are not using the webpacker webpacker setup, be sure to put in `compile: false` in the `default` section.
+  - Alternately, if you are updating from webpacker_lite, you can manually change these:
+  - Add a default setting
+    ```
+    cache_manifest: false
+    ```
+  - For production, set:  
+    ```
+    cache_manifest: true
+    ```
   - Add a section like this under your development env:
     ```
     dev_server:
       host: localhost
-      port: 8080
-      https: false
-      # Can be enabled by export WEBPACKER_HMR=TRUE in env
-      hot: false   
+      port: 3035
+      hmr: false
     ```
-  - remove `hot_reloading_host` and `hot_reloading_enabled_by_default`
-  - rename `webpack_public_output_dir` to `public_output_path`
+    Set hmr to your preference.
+  - See the example `spec/dummy/config/webpacker.yml`.
+  - Remove keys `hot_reloading_host` and `hot_reloading_enabled_by_default`. These are replaced by the `dev_server` key.
+  - Rename `webpack_public_output_dir` to `public_output_path`.
+  
+- Edit your Procfile.dev
+  - Remove the env value WEBPACKER_DEV_SERVER as it's not used
+  - For hot loading:
+    - Set the `hmr` key in your `webpacker.yml` to `true`.
+    
+    
+#### Troubleshooting
+   
+    
+  
+### [9.0.0]
+*Diffs for the beta to master*
+
+### [9.0.0-beta.12]
+- Updated for latest rails/webpacker using the official gem
+- hot reloading working in generator
+
+### [9.0.0-beta.11]
+- Updated for latest rails_webpacker.
+- hot reloading working in spec/dummy
+
+### [9.0.0-beta.10]
+- Updated for the latest rails/webpacker. Added the cache_manifest setting.
+
+### [9.0.0-beta.9]
+- Fixes precompile task going to Webpacker's. You need to set `custom_compile: true` in your `webpacker.yml`.
+- Changed webpack-bundle.js name to hello-world-bundle.js
+- Update for latest from rails/webpacker
+gem "webpacker", git: "https://github.com/shakacode/webpacker.git",
+    branch: "issue-464-merge-webpacker-lite-into-webpacker-v3"
+
+### [9.0.0-beta.8]
+- bugfix for server rendering
+
+### [9.0.0-beta.7]
+- Depend on updated rails/webpacker in branch 
+
+gem "webpacker", git: "https://github.com/shakacode/webpacker.git",
+    branch: "issue-464-merge-webpacker-lite-into-webpacker-v2"
+
+
+### [9.0.0-beta.6]
+- Change "hot" to "hmr".
+
+### [9.0.0-beta.3]
+- Fix typo on webpackConfigLoader.js
+
+### [9.0.0-beta.3]
+- Fix typo on webpackConfigLoader.js
+ 
+### [9.0.0-beta.2]
+- Fixed problems when running in development mode for both the generator and spec/dummy. 
+
+### [9.0.0-beta.1]
+- First version of depending on Webpacker rather than Webpacker Lite  
 
 ### [8.0.7]
 #### fixed
@@ -333,7 +450,7 @@ No changes.
   - See [shakacode/react-webpack-rails-tutorial/pull/287](https://github.com/shakacode/react-webpack-rails-tutorial/pull/287) for an    example of upgrading from v5.
 
   - To configure the asset compliation you can either
-    1. Specify a `config/react_on_rails` setting for `npm_build_production_command` to be nil to turn this feature off.
+    1. Specify a `config/react_on_rails` setting for `build_production_command` to be nil to turn this feature off.
     2. Specify the script command you want to run to build your production assets, and remove your assets.rake file.
 
   - If you are using the ReactOnRails test helper, then you will need to add the 'config.npm_build_test_command' to your config to tell react_on_rails what command to run when you run rspec.
@@ -344,7 +461,7 @@ Here is the addition to the generated config file:
 ```ruby
   # This configures the script to run to build the production assets by webpack. Set this to nil
   # if you don't want react_on_rails building this file for you.
-  config.npm_build_production_command = "npm run build:production"
+  config.build_production_command = "npm run build:production"
 
   # If you are using the ReactOnRails::TestHelper.configure_rspec_to_compile_assets(config)
   # with rspec then this controls what npm command is run
@@ -651,7 +768,20 @@ Best done with Object destructing:
 ##### Fixed
 - Fix several generator related issues.
 
-[Unreleased]: https://github.com/shakacode/react_on_rails/compare/8.0.7...master
+[Unreleased]: https://github.com/shakacode/react_on_rails/compare/rails-webpacker...9.0.0-beta.11
+[9.0.0]: https://github.com/shakacode/react_on_rails/compare/master...9.0.0-beta.11
+[9.0.0-beta.12]: https://github.com/shakacode/react_on_rails/compare/9.0.0-beta.11...9.0.0-beta.12
+[9.0.0-beta.11]: https://github.com/shakacode/react_on_rails/compare/9.0.0-beta.10...9.0.0-beta.11
+[9.0.0-beta.10]: https://github.com/shakacode/react_on_rails/compare/9.0.0-beta.9...9.0.0-beta.10
+[9.0.0-beta.9]: https://github.com/shakacode/react_on_rails/compare/9.0.0-beta.8...9.0.0-beta.9
+[9.0.0-beta.8]: https://github.com/shakacode/react_on_rails/compare/9.0.0-beta.7...9.0.0-beta.8
+[9.0.0-beta.7]: https://github.com/shakacode/react_on_rails/compare/9.0.0-beta.6...9.0.0-beta.7
+[9.0.0-beta.6]: https://github.com/shakacode/react_on_rails/compare/9.0.0-beta.5...9.0.0-beta.6
+[9.0.0-beta.5]: https://github.com/shakacode/react_on_rails/compare/9.0.0-beta.4...9.0.0-beta.5
+[9.0.0-beta.4]: https://github.com/shakacode/react_on_rails/compare/9.0.0-beta.3...9.0.0-beta.4
+[9.0.0-beta.3]: https://github.com/shakacode/react_on_rails/compare/9.0.0-beta.2...9.0.0-beta.3
+[9.0.0-beta.2]: https://github.com/shakacode/react_on_rails/compare/9.0.0-beta.1...9.0.0-beta.2
+[9.0.0-beta.1]: https://github.com/shakacode/react_on_rails/compare/master...9.0.0-beta.1
 [8.0.7]: https://github.com/shakacode/react_on_rails/compare/8.0.6...8.0.7
 [8.0.6]: https://github.com/shakacode/react_on_rails/compare/8.0.5...8.0.6
 [8.0.5]: https://github.com/shakacode/react_on_rails/compare/8.0.3...8.0.5

CONTRIBUTING.md

@@ -46,7 +46,7 @@ When making doc changes, we want the change to work on both the gitbook and the
 
 ```sh
 cd react_on_rails/
-bundle && yarn && rake examples:prepare_all && rake node_package && rake
+bundle && yarn && rake examples:gen_all && rake node_package && rake
 ```
 
 In order to run tests in browser
@@ -145,7 +145,7 @@ yarn run install-react-on-rails
 ```
 _Note: this runs npm under the hood as explained in **Test NPM for react-on-rails** section above_
 
-From now on, the example and dummy apps will use your local node_package folder as the react-on-rails node package. This will also be done automatically for you via the `rake examples:prepare_all` rake task.
+From now on, the example and dummy apps will use your local node_package folder as the react-on-rails node package. This will also be done automatically for you via the `rake examples:gen_all` rake task.
 
 *Side note: It's critical to use the alias section of the webpack config to avoid a double inclusion error. This has already been done for you in the example and dummy apps, but for reference:*
 

Gemfile

@@ -38,7 +38,10 @@ gem "chromedriver-helper"
 gem "launchy"
 gem "poltergeist"
 gem "selenium-webdriver"
-gem "webpacker", git: "https://github.com/shakacode/webpacker.git",
-                 branch: "issue-464-merge-webpacker-lite-into-webpacker"
+gem "webpacker", "~> 3.0"
 
+# TODO: remove once we get out of beta.
+# gem 'webpacker', path: "../../forks/webpacker"
+
+gem "equivalent-xml", github: "mbklein/equivalent-xml"
 gem "rainbow"

README.md

@@ -24,7 +24,6 @@ Turn on HMR (Hot reloading)
 
 ---------------
 
-
 ## Thank you from Justin Gordon and [ShakaCode](http://www.shakacode.com)
 
 Thank you for considering using [React on Rails](https://github.com/shakacode/react_on_rails).
@@ -166,10 +165,18 @@ To upgrade existing apps to React on Rails 8 see the [Installation Overview](doc
 1. Add the following to your Gemfile and `bundle install`. We recommend fixing the version of React on Rails, as you will need to keep the exact version in sync with the version in your `client/package.json` file.
 
   ```ruby
-  gem "react_on_rails", "8.0.0"
+  gem "react_on_rails", "9.0.0"
+  gem "webpacker", "~> 3.0"
   ```
 
-2. Commit this to git (you cannot run the generator unless you do this or pass the option `--ignore-warnings`).
+2. Run the following 2 commands to install Webpacker with React:
+   ```
+   bundle exec rails webpacker:install
+   bundle exec rails webpacker:install:react
+   
+   ```
+
+2. Commit this to git (or else you cannot run the generator unless you pass the option `--ignore-warnings`).
 
 3. See help for the generator:
 
@@ -183,13 +190,7 @@ To upgrade existing apps to React on Rails 8 see the [Installation Overview](doc
   rails generate react_on_rails:install
   ```
 
-5. Bundle and NPM install. Make sure you are on a recent version of node. Please use at least Node v5. Bundle is for adding execJs. You can remove that if you are sure you will not server render.
-
-  ```bash
-  bundle && yarn
-  ```
-
-6. Ensure that you have `foreman` installed: `gem install foreman`.
+5. Ensure that you have `foreman` installed: `gem install foreman`.
 
 7. Start your Rails server:
 
@@ -259,6 +260,11 @@ cd client && yarn add react-on-rails
 
 That will install the latest version and update your package.json.
 
+## Webpacker Configuration
+
+React on Rails users should set configuration value `compile` to false, as React on Rails handles compilation for test and production environments.
+
+
 ## How it Works
 The generator installs your webpack files in the `client` folder. Foreman uses webpack to compile your code and output the bundled results to `app/assets/webpack`, which are then loaded by sprockets. These generated bundle files have been added to your `.gitignore` for your convenience.
 
@@ -423,12 +429,12 @@ end
 In this case, a prop and value for `somethingUseful` will go into the railsContext passed to all react_component and redux_store calls. You may set any values available in the view rendering context.
 
 ### Globally Exposing Your React Components
-Place your JavaScript code inside of the provided `client/app` folder. Use modules just as you would when using webpack alone. The difference here is that instead of mounting React components directly to an element using `React.render`, you **register your components to ReactOnRails and then mount them with helpers inside of your Rails views**.
+Place your JavaScript code inside of the default `app/javascript` folder. Use modules just as you would when using webpack alone. The difference here is that instead of mounting React components directly to an element using `React.render`, you **register your components to ReactOnRails and then mount them with helpers inside of your Rails views**.
 
 This is how to expose a component to the `react_component` view helper.
 
   ```javascript
-  // client/app/bundles/HelloWorld/startup/HelloWorld.jsx
+  // app/javascript/packs/hello-world-bundle.js
   import HelloWorld from '../components/HelloWorld';
   import ReactOnRails from 'react-on-rails';
   ReactOnRails.register({ HelloWorld });
@@ -591,7 +597,7 @@ If you are using [jquery-ujs](https://github.com/rails/jquery-ujs) for AJAX call
 ## Deployment
 * Version 6.0 puts the necessary precompile steps automatically in the rake precompile step. You can, however, disable this by setting certain values to nil in the [config/initializers/react_on_rails.rb](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/config/initializers/react_on_rails.rb).
   * `config.symlink_non_digested_assets_regex`: Set to nil to turn off the setup of non-js assets.
-  * `npm_build_production_command`: Set to nil to turn off the precompilation of the js assets.
+  * `build_production_command`: Set to nil to turn off the precompilation of the js assets.
 * See the [Heroku Deployment](./docs/additional-reading/heroku-deployment.md) doc for specifics regarding Heroku. The information here should apply to other deployments.
 
 ## Integration with Node.js for Server Rendering
@@ -628,6 +634,7 @@ If you want to use a node server for server rendering, [get in touch](mailto:jus
 + **Development**
   + [React on Rails Basic Installation Tutorial](./docs/tutorial.md) ([live demo](https://hello-react-on-rails.herokuapp.com))
   + [Installation Overview](./docs/basics/installation-overview.md)
+  + [Configuration](./docs/basics/configuration.md)
   + [Migration from react-rails](./docs/basics/migrating-from-react-rails.md)
   + [Recommended Project Structure](./docs/additional-reading/recommended-project-structure.md)
   + [Generator Tips](./docs/basics/generator.md)

Rakefile

@@ -3,7 +3,7 @@
 # Rake will automatically load any *.rake files inside of the "rakelib" folder
 # See rakelib/
 tasks = %w[run_rspec lint]
-prepare_for_ci = %w[node_package dummy_apps examples]
+prepare_for_ci = %w[node_package dummy_apps]
 
 if ENV["USE_COVERALLS"] == "TRUE"
   require "coveralls/rake/task"

docs/additional-reading/asset-pipeline.md

@@ -0,0 +1,20 @@
+# Asset Pipeline
+
+The plumbing of webpack produced assets through the asset pipeline is deprecated as of v9.0.
+
+The information in this document is here for those that have not yet upgraded.
+
+
+
+
+This option still works for your `/config/initializers/react_on_rails.rb` if you are still using the
+asset pipeline.
+```
+  ################################################################################
+  # MISCELLANEOUS OPTIONS
+  ################################################################################
+  # If you want to use webpack for CSS and images, and still use the asset pipeline,
+  # see https://github.com/shakacode/react_on_rails/blob/master/docs/additional-reading/rails-assets.md
+  # And you will use a setting like this.
+  config.symlink_non_digested_assets_regex = /\.(png|jpg|jpeg|gif|tiff|woff|ttf|eot|svg|map)/
+```