Fix Linting issues, Add source reference to each config file

lib/generators/react_on_rails/base_generator.rb

@@ -82,7 +82,8 @@ def add_yarn_dependencies
         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"
+        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"

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

@@ -2,4 +2,4 @@ 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;
+export default HelloWorld;

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

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

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

@@ -1,20 +1,21 @@
+// 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) {
-  var validEnv = ['development', 'test', 'production']
-  var currentEnv = api.env()
+  const validEnv = ['development', 'test', 'production'];
+  const currentEnv = api.env();
   // https://babeljs.io/docs/en/config-files#apienv
   // api.env is almost the NODE_ENV
-  var isDevelopmentEnv = api.env('development')
-  var isProductionEnv = api.env('production')
-  var isTestEnv = api.env('test')
+  const isDevelopmentEnv = api.env('development');
+  const isProductionEnv = api.env('production');
+  const isTestEnv = api.env('test');
 
-  if ( !validEnv.includes(currentEnv)) {
-    throw new Error(
+  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) +
-      '.'
-    )
+        '`BABEL_ENV` environment variables. Valid values are "development", ' +
+        '"test", and "production". Instead, received: '
+    }${JSON.stringify(currentEnv)}.`);
   }
 
   return {
@@ -23,11 +24,11 @@ module.exports = function (api) {
         '@babel/preset-env',
         {
           targets: {
-            node: 'current'
+            node: 'current',
           },
-          modules: 'commonjs'
+          modules: 'commonjs',
         },
-        '@babel/preset-react'
+        '@babel/preset-react',
       ],
       (isProductionEnv || isDevelopmentEnv) && [
         '@babel/preset-env',
@@ -36,17 +37,17 @@ module.exports = function (api) {
           useBuiltIns: 'entry',
           corejs: 3,
           modules: false,
-          exclude: ['transform-typeof-symbol']
-        }
+          exclude: ['transform-typeof-symbol'],
+        },
       ],
       [
         '@babel/preset-react',
         {
           development: isDevelopmentEnv || isTestEnv,
-          useBuiltIns: true
-        }
+          useBuiltIns: true,
+        },
       ],
-      ['@babel/preset-typescript', {allExtensions: true, isTSX: true}]
+      ['@babel/preset-typescript', { allExtensions: true, isTSX: true }],
     ].filter(Boolean),
     plugins: [
       'babel-plugin-macros',
@@ -56,48 +57,48 @@ module.exports = function (api) {
       [
         '@babel/plugin-proposal-class-properties',
         {
-          loose: true
-        }
+          loose: true,
+        },
       ],
       [
         '@babel/plugin-proposal-object-rest-spread',
         {
-          useBuiltIns: true
-        }
+          useBuiltIns: true,
+        },
       ],
       [
         '@babel/plugin-transform-runtime',
         {
           helpers: false,
           regenerator: true,
-          corejs: false
-        }
+          corejs: false,
+        },
       ],
       [
         '@babel/plugin-transform-regenerator',
         {
-          async: false
-        }
+          async: false,
+        },
       ],
       [
-        "@babel/plugin-proposal-private-property-in-object",
+        '@babel/plugin-proposal-private-property-in-object',
         {
-          "loose": true
-        }
+          loose: true,
+        },
       ],
       [
-        "@babel/plugin-proposal-private-methods",
+        '@babel/plugin-proposal-private-methods',
         {
-          loose: true
-        }
+          loose: true,
+        },
       ],
       process.env.WEBPACK_SERVE && 'react-refresh/babel',
       isProductionEnv && [
         'babel-plugin-transform-react-remove-prop-types',
         {
-          removeImport: true
-        }
-      ]
-    ].filter(Boolean)
-  }
-}
+          removeImport: true,
+        },
+      ],
+    ].filter(Boolean),
+  };
+};

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

@@ -1,15 +1,18 @@
-const commonWebpackConfig = require('./commonWebpackConfig')
+// 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()
+  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']
+  delete clientConfig.entry['server-bundle'];
 
-  return clientConfig
-}
+  return clientConfig;
+};
 
-module.exports = configureClient
+module.exports = configureClient;

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

@@ -1,14 +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 { webpackConfig: baseClientWebpackConfig, merge } = require('@rails/webpacker');
 
 const commonOptions = {
   resolve: {
-      extensions: ['.css', '.ts', '.tsx']
-  }
-}
+    extensions: ['.css', '.ts', '.tsx'],
+  },
+};
 
 // Copy the object using merge b/c the baseClientWebpackConfig and commonOptions are mutable globals
-const commonWebpackConfig = () => (merge({}, baseClientWebpackConfig, commonOptions))
+const commonWebpackConfig = () => merge({}, baseClientWebpackConfig, commonOptions);
 
-module.exports = commonWebpackConfig
+module.exports = commonWebpackConfig;

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

@@ -1,40 +1,28 @@
-process.env.NODE_ENV = process.env.NODE_ENV || 'development'
+// 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
 
-const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin')
-const path = require('path')
-const { devServer, inliningCss } = require('@rails/webpacker')
+process.env.NODE_ENV = process.env.NODE_ENV || 'development';
 
-const webpackConfig = require('./webpackConfig')
+const { devServer, inliningCss } = require('@rails/webpacker');
 
-const developmentEnvOnly = (clientWebpackConfig, serverWebpackConfig) => {
+const webpackConfig = require('./webpackConfig');
 
-  const isWebpackDevServer = process.env.WEBPACK_DEV_SERVER
+const developmentEnvOnly = (clientWebpackConfig, _serverWebpackConfig) => {
+  // eslint-disable-next-line no-unused-vars
+  const isWebpackDevServer = process.env.WEBPACK_DEV_SERVER;
 
-  //plugins
-  if (inliningCss ) {
+  // 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.
-    const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin')
-    clientWebpackConfig.plugins.push(
-      new ReactRefreshWebpackPlugin({
-        overlay:{
-          sockPort: devServer.port
-        }
-      })
-    )
-  }
-
-  // To support TypeScript type checker on a separate process uncomment the block below and add tsconfig.json
-  // to the root directory.
-  // As a reference visit https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh/blob/master/config/webpack/development.js
 
-  // clientWebpackConfig.plugins.push(
-  //   new ForkTsCheckerWebpackPlugin({
-  //     typescript: {
-  //       configFile: path.resolve(__dirname, '../../tsconfig.json')
-  //     },
-  //     async: false
-  //   })
-  // )
-}
-module.exports = webpackConfig(developmentEnvOnly)
+    // 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

@@ -1,11 +1,12 @@
-process.env.NODE_ENV = process.env.NODE_ENV || 'production'
+// 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
 
-// Below code should get refactored but the current way that rails/webpacker v5
-// does the globals, it's tricky
-const webpackConfig = require('./webpackConfig')
+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)
+module.exports = webpackConfig(productionEnvOnly);