Fix ESLint errors, Add source reference to each config file

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

@@ -4,5 +4,5 @@ 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(
-      'Please specify a valid `NODE_ENV` or ' +
+  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) +
-      '.'
-    )
+      '"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,3 +1,6 @@
+// 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 = () => {

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

@@ -1,11 +1,14 @@
+// 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']
-  }
+    extensions: ['.css', '.ts', '.tsx'],
+  },
 }
 
 // Copy the object using merge b/c the baseClientWebpackConfig and commonOptions are mutable globals

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

@@ -1,40 +1,24 @@
+// 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 ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin')
-const path = require('path')
+const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin')
+
 const { devServer, inliningCss } = require('@rails/webpacker')
 
 const webpackConfig = require('./webpackConfig')
 
-const developmentEnvOnly = (clientWebpackConfig, serverWebpackConfig) => {
-
-  const isWebpackDevServer = process.env.WEBPACK_DEV_SERVER
-
-  //plugins
-  if (inliningCss ) {
+const developmentEnvOnly = (clientWebpackConfig, _serverWebpackConfig) => {
+  // 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
-        }
-      })
-    )
+    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)

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

@@ -1,7 +1,8 @@
+// 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'
 
-// Below code should get refactored but the current way that rails/webpacker v5
-// does the globals, it's tricky
 const webpackConfig = require('./webpackConfig')
 
 const productionEnvOnly = (_clientWebpackConfig, _serverWebpackConfig) => {

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

@@ -1,3 +1,9 @@
+/* eslint-disable no-unused-vars */
+/* eslint-disable no-param-reassign */
+
+// The source can be found at:
+// https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh/blob/master/config/webpack/serverWebpackConfig.js
+
 const { merge, config } = require('@rails/webpacker')
 const commonWebpackConfig = require('./commonWebpackConfig')
 
@@ -12,7 +18,7 @@ const configureServer = () => {
 
   // We just want the single server bundle entry
   const serverEntry = {
-    'server-bundle': serverWebpackConfig.entry['server-bundle']
+    'server-bundle': serverWebpackConfig.entry['server-bundle'],
   }
 
   if (!serverEntry['server-bundle']) {
@@ -26,20 +32,16 @@ const configureServer = () => {
   // replace file-loader with null-loader
   serverWebpackConfig.module.rules.forEach((loader) => {
     if (loader.use && loader.use.filter) {
-      loader.use = loader.use.filter(
-        (item) =>
-          !(typeof item === 'string' && item.match(/mini-css-extract-plugin/))
-      )
+      loader.use = loader.use.filter((item) =>
+        !(typeof item === 'string' && item.match(/mini-css-extract-plugin/)))
     }
   })
 
   // No splitting of chunks for a server bundle
   serverWebpackConfig.optimization = {
-    minimize: false
+    minimize: false,
   }
-  serverWebpackConfig.plugins.unshift(
-    new webpack.optimize.LimitChunkCountPlugin({ maxChunks: 1 })
-  )
+  serverWebpackConfig.plugins.unshift(new webpack.optimize.LimitChunkCountPlugin({ maxChunks: 1 }))
 
   // Custom output for the server-bundle that matches the config in
   // config/initializers/react_on_rails.rb
@@ -55,18 +57,16 @@ const configureServer = () => {
 
   // Don't hash the server bundle b/c would conflict with the client manifest
   // And no need for the MiniCssExtractPlugin
-  serverWebpackConfig.plugins = serverWebpackConfig.plugins.filter(
-    (plugin) =>
-      plugin.constructor.name !== 'WebpackAssetsManifest' &&
+  serverWebpackConfig.plugins = serverWebpackConfig.plugins.filter((plugin) =>
+    plugin.constructor.name !== 'WebpackAssetsManifest' &&
       plugin.constructor.name !== 'MiniCssExtractPlugin' &&
-      plugin.constructor.name !== 'ForkTsCheckerWebpackPlugin'
-  )
+      plugin.constructor.name !== 'ForkTsCheckerWebpackPlugin')
 
   // Configure loader rules for SSR
   // Remove the mini-css-extract-plugin from the style loaders because
   // the client build will handle exporting CSS.
   // replace file-loader with null-loader
-  const rules = serverWebpackConfig.module.rules;
+  const { rules } = serverWebpackConfig.module;
   rules.forEach((rule) => {
     if (Array.isArray(rule.use)) {
       // remove the mini-css-extract-plugin and style-loader
@@ -100,10 +100,6 @@ const configureServer = () => {
     }
   });
 
-  // TODO: DELETE NEXT 2 LINES
-  // Critical due to https://github.com/rails/webpacker/pull/2644
-  // delete serverWebpackConfig.devServer
-
   // eval works well for the SSR bundle because it's the fastest and shows
   // lines in the server bundle which is good for debugging SSR
   // The default of cheap-module-source-map is slow and provides poor info.

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

@@ -1,3 +1,6 @@
+// The source can be found at:
+// https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh/blob/master/config/webpack/webpackConfig.js
+
 const clientWebpackConfig = require('./clientWebpackConfig')
 const serverWebpackConfig = require('./serverWebpackConfig')