Update the install generator to add Webpacker configuration

.prettierignore

@@ -8,3 +8,5 @@ gen-examples/examples/*
 node_package/lib/*
 spec/react_on_rails/dummy-for-generators/app/javascript/bundles/HelloWorld/*
 bundle/
+lib/generators/react_on_rails/templates/base/base/config/webpack
+lib/generators/react_on_rails/templates/base/base/babel.config.js

lib/generators/react_on_rails/base_generator.rb

@@ -37,6 +37,35 @@ def copy_base_files
         base_files.each { |file| copy_file("#{base_path}#{file}", file) }
       end
 
+      def copy_js_bundle_files
+        base_path = "base/base/"
+        base_files = %w[app/javascript/packs/server-bundle.js
+                        app/javascript/bundles/HelloWorld/components/HelloWorldServer.js
+                        app/javascript/bundles/HelloWorld/components/HelloWorld.module.css]
+        base_files.each { |file| copy_file("#{base_path}#{file}", file) }
+      end
+
+      def copy_webpack_config
+        puts "Adding Webpack config"
+        base_path = "base/base/"
+        base_files = %w[babel.config.js
+                        config/webpack/clientWebpackConfig.js
+                        config/webpack/commonWebpackConfig.js
+                        config/webpack/development.js
+                        config/webpack/production.js
+                        config/webpack/serverWebpackConfig.js
+                        config/webpack/test.js
+                        config/webpack/webpackConfig.js]
+        base_files.each { |file| copy_file("#{base_path}#{file}", file) }
+      end
+
+      def copy_webpacker_config
+        puts "Adding Webpacker v6 config"
+        base_path = "base/base/"
+        base_files = %w[config/webpacker.yml]
+        base_files.each { |file| copy_file("#{base_path}#{file}", file) }
+      end
+
       def add_base_gems_to_gemfile
         gem "mini_racer", platforms: :ruby
         run "bundle"
@@ -51,6 +80,19 @@ def add_yarn_dependencies
           puts "Adding the lastest react-on-rails NPM module. Double check this is correct in package.json"
           run "yarn add react-on-rails --exact"
         end
+
+        puts "Adding React dependencies"
+        run "yarn add react react-dom @babel/preset-react prop-types babel-plugin-transform-react-remove-prop-types \
+            babel-plugin-macros"
+
+        puts "Adding TypeScript dependencies"
+        run "yarn add typescript @babel/preset-typescript @types/react @types/react-dom"
+
+        puts "Adding CSS handlers"
+        run "yarn add css-loader css-minimizer-webpack-plugin mini-css-extract-plugin style-loader"
+
+        puts "Adding dev dependencies"
+        run "yarn add -D @pmmmwh/react-refresh-webpack-plugin fork-ts-checker-webpack-plugin react-refresh"
       end
 
       def append_to_spec_rails_helper

lib/generators/react_on_rails/templates/base/base/app/javascript/bundles/HelloWorld/components/HelloWorld.jsx

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { useState } from 'react';
+import style from './HelloWorld.module.css';
 
 const HelloWorld = (props) => {
   const [name, setName] = useState(props.name);
@@ -9,7 +10,7 @@ const HelloWorld = (props) => {
       <h3>Hello, {name}!</h3>
       <hr />
       <form>
-        <label htmlFor="name">
+        <label className={style.bright} htmlFor="name">
           Say hello to:
           <input id="name" type="text" value={name} onChange={(e) => setName(e.target.value)} />
         </label>

lib/generators/react_on_rails/templates/base/base/app/javascript/bundles/HelloWorld/components/HelloWorld.module.css

@@ -0,0 +1,4 @@
+.bright {
+    color: green;
+    font-weight: bold;
+}

lib/generators/react_on_rails/templates/base/base/app/javascript/bundles/HelloWorld/components/HelloWorldServer.js

@@ -0,0 +1,5 @@
+import HelloWorld from './HelloWorld';
+// This could be specialized for server rendering
+// For example, if using React-Router, we'd have the SSR setup here.
+
+export default HelloWorld;

lib/generators/react_on_rails/templates/base/base/app/javascript/packs/server-bundle.js

@@ -0,0 +1,8 @@
+import ReactOnRails from 'react-on-rails';
+
+import HelloWorld from '../bundles/HelloWorld/components/HelloWorldServer';
+
+// This is how react_on_rails can see the HelloWorld in the browser.
+ReactOnRails.register({
+  HelloWorld,
+});

lib/generators/react_on_rails/templates/base/base/babel.config.js

@@ -0,0 +1,104 @@
+// The source code including full typescript support is available at:
+// https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh/blob/master/babel.config.js
+
+module.exports = function (api) {
+  const validEnv = ['development', 'test', 'production'];
+  const currentEnv = api.env();
+  // https://babeljs.io/docs/en/config-files#apienv
+  // api.env is almost the NODE_ENV
+  const isDevelopmentEnv = api.env('development');
+  const isProductionEnv = api.env('production');
+  const isTestEnv = api.env('test');
+
+  if (!validEnv.includes(currentEnv)) {
+    throw new Error(`${
+      'Please specify a valid `NODE_ENV` or ' +
+        '`BABEL_ENV` environment variables. Valid values are "development", ' +
+        '"test", and "production". Instead, received: '
+    }${JSON.stringify(currentEnv)}.`);
+  }
+
+  return {
+    presets: [
+      isTestEnv && [
+        '@babel/preset-env',
+        {
+          targets: {
+            node: 'current',
+          },
+          modules: 'commonjs',
+        },
+        '@babel/preset-react',
+      ],
+      (isProductionEnv || isDevelopmentEnv) && [
+        '@babel/preset-env',
+        {
+          forceAllTransforms: true,
+          useBuiltIns: 'entry',
+          corejs: 3,
+          modules: false,
+          exclude: ['transform-typeof-symbol'],
+        },
+      ],
+      [
+        '@babel/preset-react',
+        {
+          development: isDevelopmentEnv || isTestEnv,
+          useBuiltIns: true,
+        },
+      ],
+      ['@babel/preset-typescript', { allExtensions: true, isTSX: true }],
+    ].filter(Boolean),
+    plugins: [
+      'babel-plugin-macros',
+      '@babel/plugin-syntax-dynamic-import',
+      isTestEnv && 'babel-plugin-dynamic-import-node',
+      '@babel/plugin-transform-destructuring',
+      [
+        '@babel/plugin-proposal-class-properties',
+        {
+          loose: true,
+        },
+      ],
+      [
+        '@babel/plugin-proposal-object-rest-spread',
+        {
+          useBuiltIns: true,
+        },
+      ],
+      [
+        '@babel/plugin-transform-runtime',
+        {
+          helpers: false,
+          regenerator: true,
+          corejs: false,
+        },
+      ],
+      [
+        '@babel/plugin-transform-regenerator',
+        {
+          async: false,
+        },
+      ],
+      [
+        '@babel/plugin-proposal-private-property-in-object',
+        {
+          loose: true,
+        },
+      ],
+      [
+        '@babel/plugin-proposal-private-methods',
+        {
+          loose: true,
+        },
+      ],
+      process.env.WEBPACK_SERVE && 'react-refresh/babel',
+      isProductionEnv && [
+        'babel-plugin-transform-react-remove-prop-types',
+        {
+          removeImport: true,
+        },
+      ],
+    ].filter(Boolean),
+  };
+};

lib/generators/react_on_rails/templates/base/base/config/initializers/react_on_rails.rb

@@ -41,5 +41,5 @@
   # different. You should have ONE server bundle which can create all of your server rendered
   # React components.
   #
-  config.server_bundle_js_file = "hello-world-bundle.js"
+  config.server_bundle_js_file = "server-bundle.js"
 end

lib/generators/react_on_rails/templates/base/base/config/webpack/clientWebpackConfig.js

@@ -0,0 +1,18 @@
+// The source can be found at:
+// https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh/blob/master/config/webpack/clientWebpackConfig.js
+
+const commonWebpackConfig = require('./commonWebpackConfig');
+
+const configureClient = () => {
+  const clientConfig = commonWebpackConfig();
+
+  // server-bundle is special and should ONLY be built by the serverConfig
+  // In case this entry is not deleted, a very strange "window" not found
+  // error shows referring to window["webpackJsonp"]. That is because the
+  // client config is going to try to load chunks.
+  delete clientConfig.entry['server-bundle'];
+
+  return clientConfig;
+};
+
+module.exports = configureClient;

lib/generators/react_on_rails/templates/base/base/config/webpack/commonWebpackConfig.js

@@ -0,0 +1,17 @@
+// The source can be found at:
+// https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh/blob/master/config/webpack/commonWebpackConfig.js
+
+// Common configuration applying to client and server configuration
+
+const { webpackConfig: baseClientWebpackConfig, merge } = require('@rails/webpacker');
+
+const commonOptions = {
+  resolve: {
+    extensions: ['.css', '.ts', '.tsx'],
+  },
+};
+
+// Copy the object using merge b/c the baseClientWebpackConfig and commonOptions are mutable globals
+const commonWebpackConfig = () => merge({}, baseClientWebpackConfig, commonOptions);
+
+module.exports = commonWebpackConfig;

lib/generators/react_on_rails/templates/base/base/config/webpack/development.js

@@ -0,0 +1,28 @@
+// The source code including full typescript support is available at:
+// https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh/blob/master/config/webpack/development.js
+
+process.env.NODE_ENV = process.env.NODE_ENV || 'development';
+
+const { devServer, inliningCss } = require('@rails/webpacker');
+
+const webpackConfig = require('./webpackConfig');
+
+const developmentEnvOnly = (clientWebpackConfig, _serverWebpackConfig) => {
+  // eslint-disable-next-line no-unused-vars
+  const isWebpackDevServer = process.env.WEBPACK_DEV_SERVER;
+
+  // plugins
+  if (inliningCss) {
+    // Note, when this is run, we're building the server and client bundles in separate processes.
+    // Thus, this plugin is not applied.
+
+    // eslint-disable-next-line global-require
+    const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
+    clientWebpackConfig.plugins.push(new ReactRefreshWebpackPlugin({
+      overlay: {
+        sockPort: devServer.port,
+      },
+    }));
+  }
+};
+module.exports = webpackConfig(developmentEnvOnly);

lib/generators/react_on_rails/templates/base/base/config/webpack/production.js

@@ -0,0 +1,12 @@
+// The source can be found at:
+// https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh/blob/master/config/webpack/production.js
+
+process.env.NODE_ENV = process.env.NODE_ENV || 'production';
+
+const webpackConfig = require('./webpackConfig');
+
+const productionEnvOnly = (_clientWebpackConfig, _serverWebpackConfig) => {
+  // place any code here that is for production only
+};
+
+module.exports = webpackConfig(productionEnvOnly);