Merge pull request #343 from guardian/rm/bump-webpack-to-v5

.babelrc

@@ -1,17 +1,17 @@
 // .babelrc
 {
   "presets": [
-    ["es2015", {"modules": false}],
-    "react"
-  ],
-  "plugins": [
-    "transform-object-assign",
-    "transform-class-properties",
-    "react-hot-loader/babel"
-  ],
-  "env": {
-    "test": {
-      "plugins": ["transform-es2015-modules-commonjs"]
-    }
-  }
+    "@babel/preset-react",
+    [
+      "@babel/preset-env",
+      {
+          "useBuiltIns": "entry",
+          "corejs": "3.19",
+          "targets": {
+              "chrome": 75,
+              "ios": 12
+          }
+      }
+    ]
+  ]
 }

.nvmrc

@@ -1 +1 @@
-12.13.1
+18.18.2

conf/webpack.conf.js

@@ -1,44 +1,55 @@
 /* global module:false, __dirname:false */
 
-var path = require('path');
-var webpack = require('webpack');
-var ExtractTextPlugin = require('extract-text-webpack-plugin');
+const path = require('path');
+const webpack = require('webpack');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
 module.exports = {
-    devtool: 'cheap-module-source-map',
+    devtool: 'source-map',
+    entry: {
+        app: './public/js/app.js'
+    },
+    output: {
+        path:       path.join(__dirname, '../public/build'),
+        filename:   'app.js'
+    },
     module: {
-        loaders: [
+        rules: [
             {
-                test:    /\.js$/,
+                test: /\.m?js$/,
                 exclude: /node_modules/,
-                loaders: ['babel-loader']
+                use: {
+                    loader: 'babel-loader',
+                    options: {
+                        presets: ['@babel/preset-env', '@babel/preset-react'],
+                        plugins: ['@babel/plugin-transform-object-assign']
+                    }
+                }
             },
             {
                 test:    /\.js$/,
                 include: [path.resolve(__dirname, "../node_modules/panda-session")],
-                loaders: ['babel-loader']
+                use: {
+                    loader: 'babel-loader'
+                }
             },
             {
+                test: /\.css$/i,
+                use: [MiniCssExtractPlugin.loader, "css-loader"],
+              },
+              {
                 test: /\.scss$/,
-                loader: ExtractTextPlugin.extract({
-                    fallback: 'style-loader',
-                    use: 'css-loader?sourceMap!sass-loader?sourceMap'
-                })
-            },
-            {
-                test: /\.css$/,
-                loader: ExtractTextPlugin.extract({
-                    fallback: 'style-loader',
-                    use: 'css-loader?sourceMap'
-                })
-            },
-            {
-                test: /\.woff(2)?(\?v=[0-9].[0-9].[0-9])?$/,
-                loader: "url-loader?mimetype=application/font-woff&limit=10000"
+                use: [
+                  MiniCssExtractPlugin.loader,
+                  {
+                    loader: "css-loader",
+                  },
+                  "sass-loader"
+                ]
             },
             {
-                test: /\.(ttf|eot|svg|gif|png)(\?v=[0-9].[0-9].[0-9])?$/,
-                loader: "file-loader?name=[name].[ext]"
+                test: /\.(ttf|eot|svg|gif|png|woff(2))(\?v=[0-9].[0-9].[0-9])?$/,
+                type: 'asset/resource'
             }
         ]
     },
@@ -48,10 +59,8 @@ module.exports = {
     },
 
     plugins: [
-        new ExtractTextPlugin('main.css'),
-        new webpack.ProvidePlugin({
-            'Promise': 'es6-promise',
-            'fetch': 'imports-loader?this=>global!exports-loader?global.fetch!whatwg-fetch'
+        new MiniCssExtractPlugin({
+            filename: 'main.css',
         })
     ]
 };

package.json

@@ -4,10 +4,10 @@
   "description": "A tool for creating multiple atom types.",
   "main": "public/index.html",
   "scripts": {
-    "start": "webpack ./public/js/app.js ./public/build/app.js --config ./conf/webpack.conf.js --watch",
-    "build": "webpack -p ./public/js/app.js ./public/build/app.js --config ./conf/webpack.conf.js",
-    "test": "jest",
-    "lint": "eslint public/**"
+    "start": "webpack --mode development --config ./conf/webpack.conf.js --watch",
+    "build": "webpack --mode production --config ./conf/webpack.conf.js",
+    "test": "jest ./public/js",
+    "lint": "eslint public/js/** --ext .js"
   },
   "repository": {
     "type": "git",
@@ -20,48 +20,46 @@
   "jest": {
     "testPathDirs": [
       "<rootDir>/public/js"
-    ]
+    ],
+    "testEnvironment": "jsdom"
   },
   "homepage": "https://github.com/guardian/atom-workshop",
   "devDependencies": {
-    "babel-core": "^6.21.0",
-    "babel-eslint": "6",
-    "babel-jest": "^18.0.0",
-    "babel-loader": "^6.2.10",
-    "babel-plugin-transform-es2015-modules-commonjs": "^6.22.0",
-    "babel-plugin-transform-object-assign": "^6.8.0",
-    "babel-preset-es2015": "^6.18.0",
-    "babel-preset-react": "^6.16.0",
-    "css-loader": "^0.26.1",
+    "@babel/core": "^7.23.2",
+    "@babel/plugin-transform-object-assign": "^7.22.5",
+    "@babel/preset-env": "^7.23.2",
+    "@babel/preset-react": "^7.22.15",
+    "babel-jest": "^29.7.0",
+    "babel-loader": "^9.1.3",
+    "css-loader": "^6.8.1",
     "enzyme": "^3.10.0",
-    "eslint": "^3.15.0",
+    "eslint": "^4.12.1",
     "eslint-plugin-react": "^6.9.0",
-    "extract-text-webpack-plugin": "^2.1.2",
-    "file-loader": "^0.9.0",
-    "jest": "^18.1.0",
-    "node-sass": "4.13.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "jsdom": "^22.1.0",
+    "mini-css-extract-plugin": "^2.7.6",
     "react-addons-test-utils": "^15.4.2",
     "react-hot-loader": "^3.1.1",
     "react-test-renderer": "^15.4.2",
-    "sass-loader": "^4.1.1",
-    "style-loader": "^0.13.1",
-    "url-loader": "^0.5.7",
-    "webpack": "^2.6.1"
+    "sass": "^1.69.4",
+    "sass-loader": "^13.3.2",
+    "style-loader": "3.3.3",
+    "webpack": "^5.89.0",
+    "webpack-cli": "^5.1.4"
   },
   "dependencies": {
-    "babel-plugin-transform-class-properties": "^6.22.0",
+    "babel-eslint": "^10.1.0",
     "copy-to-clipboard": "^3.0.5",
     "date-fns": "^1.28.0",
     "enzyme-adapter-react-15": "^1.4.1",
     "es6-promise": "^4.0.5",
-    "exports-loader": "^0.6.3",
     "filesize": "^3.5.4",
     "history": "^4.5.1",
-    "imports-loader": "^0.7.0",
     "lodash": "^4.17.21",
     "moment": "^2.18.0",
     "panda-session": "^0.1.6",
-    "react": "^15.4.2",
+    "react": "15.7.0",
     "react-addons-shallow-compare": "^15.4.2",
     "react-dates": "^8.2.1",
     "react-dom": "^15.4.2",

public/js/components/FormFields/__snapshots__/FormFieldCheckbox.spec.js.snap

@@ -1,9 +1,13 @@
-exports[`test Should render 1`] = `
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Should render 1`] = `
 <div
-  className="form__ group form__group--checkbox--test">
+  className="form__ group form__group--checkbox--test"
+>
   <label
     className="form__label"
-    htmlFor="test">
+    htmlFor="test"
+  >
     test
   </label>
   <input
@@ -12,6 +16,7 @@ exports[`test Should render 1`] = `
     name="test"
     onChange={[Function]}
     type="checkbox"
-    value={true} />
+    value={true}
+  />
 </div>
 `;

public/js/components/FormFields/__snapshots__/FormFieldCheckboxGroup.spec.js.snap

@@ -1,50 +1,63 @@
-exports[`test Should render 1`] = `
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Should render 1`] = `
 <div
-  className="form__row">
+  className="form__row"
+>
   <label
     className="form__label"
-    htmlFor="test">
+    htmlFor="test"
+  >
     test
   </label>
   <div
-    className="form__ group form__group--checkbox--one">
+    className="form__ group form__group--checkbox--one"
+  >
     <input
       checked={true}
       className="form__checkbox"
       name="one"
       onChange={[Function]}
       type="checkbox"
-      value={true} />
+      value={true}
+    />
     <span
-      className="form__label form__label--checkbox">
+      className="form__label form__label--checkbox"
+    >
       one
     </span>
   </div>
   <div
-    className="form__ group form__group--checkbox--two">
+    className="form__ group form__group--checkbox--two"
+  >
     <input
       checked={true}
       className="form__checkbox"
       name="two"
       onChange={[Function]}
       type="checkbox"
-      value={true} />
+      value={true}
+    />
     <span
-      className="form__label form__label--checkbox">
+      className="form__label form__label--checkbox"
+    >
       two
     </span>
   </div>
   <div
-    className="form__ group form__group--checkbox--three">
+    className="form__ group form__group--checkbox--three"
+  >
     <input
       checked={false}
       className="form__checkbox"
       name="three"
       onChange={[Function]}
       type="checkbox"
-      value={false} />
+      value={false}
+    />
     <span
-      className="form__label form__label--checkbox">
+      className="form__label form__label--checkbox"
+    >
       three
     </span>
   </div>