use webpacker 5 default setup, upgrading all necessary packages and r…

…emoving custom stuff

.eslintrc

@@ -126,7 +126,7 @@
     }
   },
   "ignorePatterns": [
-    "jest.config.js",
+    "*.config.js",
     "spec/javascripts/setupTests.ts",
     "spec/javascripts/__mocks__/",
     "app/javascript/src/Stats" // We better avoid touching this module, eslint may automatically fix some of the errors and break it.

.gitignore

@@ -111,7 +111,6 @@ config/amazon_s3.yml
 db/sphinx
 public/.com.apple*
 *_flymake.rb
-/node_modules/
 /public/javascripts/cache/
 
 /test/unit/stats/tmp/
@@ -128,9 +127,6 @@ vendor/cache
 Gemfile.local
 
 .powrc
-/public/packs
-/public/packs-test
-/node_modules
 
 /vendor/oracle/*.zip
 
@@ -146,4 +142,11 @@ config/cable.yml
 .pnp.*
 package-lock.json
 *.orig
-yarn-error.log
+
+# Webpacker
+/public/packs
+/public/packs-test
+/node_modules
+/yarn-error.log
+yarn-debug.log*
+.yarn-integrity

app/javascript/src/Common/components/Select.tsx

@@ -77,7 +77,7 @@ const Select = <T extends IRecord>({
     >
       {isLoading && <Spinner className="pf-u-ml-md" size="md" />}
       {/* Controllers expect an empty string for some operations (such as unsetting the default plan) */}
-      {item && <input name={name} type="hidden" value={item.id >= 0 ? item.id : ''} />}
+      {item && <input name={name} type="hidden" value={Number(item.id) >= 0 ? item.id : ''} />}
       <PF4Select
         aria-label={ariaLabel}
         className={isClearable ? '' : 'pf-m-select__toggle-clear-hidden'}

app/javascript/src/Stats/buyer/stats_application.jsx

@@ -1,3 +1,4 @@
+/** @jsxRuntime classic */
 /** @jsx StatsUI.dom */
 import { StatsUsageChart } from 'Stats/lib/usage_chart'
 import { StatsUsageChartManager } from 'Stats/lib/usage_chart_manager'

app/javascript/src/Stats/lib/applications_selector.jsx

@@ -1,3 +1,4 @@
+/** @jsxRuntime classic */
 /** @jsx StatsUI.dom */
 import { StatsUI } from 'Stats/lib/ui'
 import $ from 'jquery'

app/javascript/src/Stats/lib/applications_table.jsx

@@ -1,3 +1,4 @@
+/** @jsxRuntime classic */
 /** @jsx StatsUI.dom */
 import numeral from 'numeral'
 

app/javascript/src/Stats/lib/csv_link.jsx

@@ -1,3 +1,4 @@
+/** @jsxRuntime classic */
 /** @jsx StatsUI.dom */
 import moment from 'moment-timezone'
 

app/javascript/src/Stats/lib/menu.jsx

@@ -1,3 +1,4 @@
+/** @jsxRuntime classic */
 /** @jsx StatsUI.dom */
 
 import pluralize from 'pluralize'

app/javascript/src/Stats/lib/methods_table.jsx

@@ -1,3 +1,4 @@
+/** @jsxRuntime classic */
 /** @jsx StatsUI.dom */
 import numeral from 'numeral'
 import moment from 'moment-timezone'

app/javascript/src/Stats/lib/metrics_selector.jsx

@@ -1,3 +1,4 @@
+/** @jsxRuntime classic */
 /** @jsx StatsUI.dom */
 import $ from 'jquery'
 import numeral from 'numeral'

app/javascript/src/Stats/provider/stats_application.jsx

@@ -1,3 +1,4 @@
+/** @jsxRuntime classic */
 /** @jsx StatsUI.dom */
 import { StatsUsageChart } from 'Stats/lib/usage_chart'
 import { StatsUsageChartManager } from 'Stats/lib/usage_chart_manager'

app/javascript/src/Stats/provider/stats_days_of_week.jsx

@@ -1,3 +1,4 @@
+/** @jsxRuntime classic */
 /** @jsx StatsUI.dom */
 
 import { PeriodRangeDate } from 'Stats/lib/state'

app/javascript/src/Stats/provider/stats_hours_of_day.jsx

@@ -1,3 +1,4 @@
+/** @jsxRuntime classic */
 /** @jsx StatsUI.dom */
 
 import { PeriodRangeDate } from 'Stats/lib/state'

app/javascript/src/Stats/provider/stats_top_apps.jsx

@@ -1,3 +1,4 @@
+/** @jsxRuntime classic */
 /** @jsx StatsUI.dom */
 import 'core-js/fn/array/find'
 import moment from 'moment'

app/javascript/src/Stats/provider/stats_usage.jsx

@@ -1,3 +1,4 @@
+/** @jsxRuntime classic */
 /** @jsx StatsUI.dom */
 import { StatsUsageChart } from 'Stats/lib/usage_chart'
 import { PeriodRangeDate } from 'Stats/lib/state'

babel.config.js

@@ -0,0 +1,101 @@
+module.exports = function(api) {
+  var validEnv = ['development', 'test', 'production']
+  var currentEnv = api.env()
+  var isDevelopmentEnv = api.env('development')
+  var isProductionEnv = api.env('production')
+  var 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',
+        {
+          runtime: 'automatic',
+          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-proposal-private-methods',
+        {
+          loose: true
+        }
+      ],
+      [
+        '@babel/plugin-proposal-private-property-in-object',
+        {
+          loose: true
+        }
+      ],
+      [
+        '@babel/plugin-transform-runtime',
+        {
+          helpers: false,
+          regenerator: true,
+          corejs: false
+        }
+      ],
+      [
+        '@babel/plugin-transform-regenerator',
+        {
+          async: false
+        }
+      ],
+      isProductionEnv && [
+        'babel-plugin-transform-react-remove-prop-types',
+        {
+          removeImport: true
+        }
+      ]
+    ].filter(Boolean)
+  }
+}

bin/webpack-dev-server

@@ -4,16 +4,15 @@ ENV["RAILS_ENV"] ||= ENV["RACK_ENV"] || "development"
 ENV["NODE_ENV"]  ||= "development"
 
 require "pathname"
-
-APP_ROOT = File.expand_path("..", __dir__)
-
-ENV["BUNDLE_GEMFILE"] ||= File.expand_path("Gemfile", APP_ROOT)
+ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile", Pathname.new(__FILE__).realpath)
 
 require "bundler/setup"
 
 require "webpacker"
 require "webpacker/dev_server_runner"
 
+APP_ROOT = File.expand_path("..", __dir__)
+
 require File.expand_path("config/initializers/webpacker.rb", APP_ROOT)
 
 Dir.chdir(APP_ROOT) do

config/initializers/content_security_policy.rb

@@ -23,3 +23,7 @@
 # For further information see the following documentation:
 # https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy-Report-Only
 # Rails.application.config.content_security_policy_report_only = true
+
+Rails.application.config.content_security_policy do |policy|
+  policy.connect_src :self, :https, "http://localhost:3035", "ws://localhost:3035" if Rails.env.development?
+end

config/webpack/development.js

@@ -1,21 +1,30 @@
-const environment = require('./environment')
+process.env.NODE_ENV = process.env.NODE_ENV || 'development'
 
-// Add Webpack custom configs here
-environment.loaders.append('eslint', {
-  test: /\.tsx?$/,
-  exclude: /(node_modules)/,
-  enforce: 'pre',
-  loader: 'eslint-loader',
-  options: {
-    eslintPath: 'eslint',
-    configFile: '.eslintrc'
-  }
-})
+const environment = require('./environment')
+const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");
+const path = require('path')
 
-// HACK: this removes transpilation errors in tests during development. tsconfig includes them so
-// that VS Code can work with imports. Ideally we should have a specific config for VS Code but
-// the plugin automatically picks `tsconfig.json` and doesn't support a custom filename.
-const tsLoader = environment.loaders.get('ts')
-tsLoader.options.reportFiles = [/!(spec\/javascripts)/]
+// The default installation (by webpacker) only transpiles TS code using Babel. This enables type
+// checking as part of the Webpack compilation process (i.e. fail the build if there are TS errors).
+environment.plugins.append(
+  "ForkTsCheckerWebpackPlugin",
+  new ForkTsCheckerWebpackPlugin({
+    eslint: {
+      files: [
+        './app/javascript/**/*.{ts,tsx}',
+        './spec/javascripts/**/*.{ts,tsx}'
+      ]
+    },
+    typescript: {
+      configFile: path.resolve(__dirname, "../../tsconfig.json"),
+      // TODO: this options is introduces in v8.0.0, it doesn't work yet.
+      // Ignore transpilation errors in specs during development. tsconfig includes them so
+      // that VS Code can work with imports. Ideally we should have a specific config for VS Code
+      // but the extension doesn't support custom config files.
+      reportFiles: ['app/javascript/**/*.{ts,tsx}'],
+    },
+    async: false,
+  })
+);
 
 module.exports = environment.toWebpackConfig()

config/webpack/environment.js

@@ -1,19 +1,6 @@
 const { environment } = require('@rails/webpacker')
 const path = require('path')
 
-// TS and TSX transpilation is done with tsc via ts-loader, we don't use babel even though it's the
-// webpacker's default. The only use for babel is to transpile legacy module Stats, which could not
-// be migrated to Typescript due to potential extreme sanity loss.
-const babelLoader = environment.loaders.get('babel')
-babelLoader.test = /\.(js|jsx)/
-babelLoader.include = path.resolve(__dirname, '../../app/javascript/src/Stats')
-
-environment.loaders.append('ts', {
-  test: /.(ts|tsx)$/,
-  options: {},
-  loader: 'ts-loader'
-})
-
 // Remove styles added automatically by @patternfly/react because it messes up our own styles.
 // We import the necessary styles manually in our .scss files and that way it works.
 environment.loaders.append('null', {

config/webpack/production.js

@@ -1,23 +1,19 @@
-const TerserPlugin = require('terser-webpack-plugin')
+process.env.NODE_ENV = process.env.NODE_ENV || 'production'
+
 const environment = require('./environment')
+const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");
 const path = require('path')
 
-// Add Webpack custom configs here
-environment.config.merge({
-  optimization: {
-    minimizer: [
-      new TerserPlugin({
-        parallel: 4
-      })
-    ]
-  },
-  output: {
-    pathinfo: false
-  },
-  devtool: 'cheap-module-eval-source-map'
-})
-
-const tsLoader = environment.loaders.get('ts')
-tsLoader.options.configFile = path.resolve(__dirname, '../../tsconfig.prod.json')
+// The default installation (by webpacker) only transpiles TS code using Babel. This enables type
+// checking as part of the Webpack compilation process (i.e. fail the build if there are TS errors).
+environment.plugins.append(
+  "ForkTsCheckerWebpackPlugin",
+  new ForkTsCheckerWebpackPlugin({
+    typescript: {
+      configFile: path.resolve(__dirname, "../../tsconfig.prod.json"),
+    },
+    async: false,
+  })
+);
 
 module.exports = environment.toWebpackConfig()

config/webpack/test.js

@@ -1,19 +1,5 @@
-const TerserPlugin = require('terser-webpack-plugin')
-const environment = require('./environment')
+process.env.NODE_ENV = process.env.NODE_ENV || 'development'
 
-// Add Webpack custom configs here
-environment.config.merge({
-  optimization: {
-    minimizer: [
-      new TerserPlugin({
-        parallel: 4
-      })
-    ]
-  },
-  output: {
-    pathinfo: false
-  },
-  devtool: 'cheap-module-eval-source-map'
-})
+const environment = require('./environment')
 
 module.exports = environment.toWebpackConfig()