uses webpacker's 5.4.4 default setup

.circleci/asset_paths

@@ -1,13 +1,13 @@
 Gemfile.lock
 yarn.lock
-.babelrc
-.postcssrc.yml
 app/javascript
 app/assets
 app/lib/pdf/images
+babel.config.js
 cdn
 config/compass.rb
 config/webpack
+config/webpacker.yml
 lib/developer_portal/app/assets
 lib/developer_portal/app/views/developer_portal/css
 lib/developer_portal/app/views/developer_portal/javascripts

.eslintrc

@@ -129,7 +129,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

@@ -108,7 +108,6 @@ config/amazon_s3.yml
 db/sphinx
 public/.com.apple*
 *_flymake.rb
-/node_modules/
 /public/javascripts/cache/
 
 /test/unit/stats/tmp/
@@ -125,9 +124,6 @@ vendor/cache
 Gemfile.local
 
 .powrc
-/public/packs
-/public/packs-test
-/node_modules
 
 /vendor/oracle/*.zip
 
@@ -141,4 +137,11 @@ Gemfile.local
 .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,102 @@
+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',
+        {
+          forceAllTransforms: true,
+          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)
+  }
+}

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,44 +1,32 @@
 const { environment } = require('@rails/webpacker')
 const path = require('path')
 
-// Add global webpack configs here
-
-environment.loaders.delete('css')
+// We don't use css modules, we can remove these loaders.
 environment.loaders.delete('moduleCss')
-environment.loaders.delete('sass')
 environment.loaders.delete('moduleSass')
 
-environment.loaders.append('ts', {
-  test: /.(ts|tsx)$/,
-  options: {},
-  loader: 'ts-loader'
+// postCss is included by default by webpacker but it breaks our styles. Removing all plugins from
+// its config file generates a lot of warning messages so better we remove the loader until we make
+// it work. TODO: make it work.
+;['css', 'sass'].forEach(key => {
+  const loader = environment.loaders.get(key)
+  loader.use = loader.use.filter(u => u.loader !== 'postcss-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', {
   test: /\.css$/,
   include: stylesheet => stylesheet.indexOf('@patternfly/react-styles/css/') > -1,
   use: ['null-loader']
 })
 
-environment.loaders.append('style', {
-  test: /(\.css|\.scss|\.sass)$/,
-  use: [
-    { loader: 'style-loader' },
-    { loader: 'css-loader' },
-    {
-      loader: 'sass-loader',
-      options: {
-        modules: true,
-        localIdentName: '[name]---[local]---[hash:base64:5]'
-      }
-    }
-  ]
-})
-
+// Quickstarts' guides are written in YAML for convenience (QuickStarts/templates), then this loader
+// allow us to import them as JSON and pass them to the React component (QuickStartContainer).
 environment.loaders.append('yaml', {
   test: /\.ya?ml$/,
   use: 'yaml-loader',
-  include: path.resolve(__dirname, '../../app/javascript'),
+  include: path.resolve(__dirname, '../../app/javascript/src/QuickStarts/templates'),
   type: 'json'
 })
 

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,7 +1,8 @@
+process.env.NODE_ENV = process.env.NODE_ENV || 'development'
+
 const TerserPlugin = require('terser-webpack-plugin')
 const environment = require('./environment')
 
-// Add Webpack custom configs here
 environment.config.merge({
   optimization: {
     minimizer: [