Update dependencies, add support for styled-components

Author: DaneEveritt

package.json

@@ -6,39 +6,39 @@
         "@fortawesome/react-fontawesome": "^0.1.4",
         "@hot-loader/react-dom": "^16.8.6",
         "axios": "^0.18.0",
-        "brace": "^0.11.1",
         "classnames": "^2.2.6",
         "date-fns": "^1.29.0",
         "easy-peasy": "^2.5.0",
         "events": "^3.0.0",
-        "feather-icons": "^4.10.0",
         "formik": "^1.5.7",
         "jquery": "^3.3.1",
-        "lodash": "^4.17.11",
         "path": "^0.12.7",
         "query-string": "^6.7.0",
         "react": "^16.8.6",
         "react-dom": "^16.8.6",
-        "react-hot-loader": "^4.9.0",
+        "react-hot-loader": "^4.12.13",
         "react-redux": "^7.1.0",
         "react-router-dom": "^5.0.1",
         "react-transition-group": "^4.1.0",
-        "socket.io-client": "^2.2.0",
         "sockette": "^2.0.6",
         "styled-components": "^4.3.2",
         "use-react-router": "^1.0.7",
         "uuid": "^3.3.2",
-        "ws-wrapper": "^2.0.0",
         "xterm": "^3.14.4",
         "xterm-addon-attach": "^0.1.0",
         "xterm-addon-fit": "^0.1.0",
         "yup": "^0.27.0"
     },
     "devDependencies": {
-        "@babel/core": "^7.2.2",
+        "@babel/core": "^7.6.0",
+        "@babel/plugin-proposal-class-properties": "^7.5.5",
+        "@babel/plugin-proposal-object-rest-spread": "^7.5.5",
         "@babel/plugin-syntax-dynamic-import": "^7.2.0",
-        "@babel/preset-env": "^7.3.1",
+        "@babel/plugin-transform-runtime": "^7.6.0",
+        "@babel/preset-env": "^7.6.0",
         "@babel/preset-react": "^7.0.0",
+        "@babel/preset-typescript": "^7.6.0",
+        "@babel/runtime": "^7.6.0",
         "@types/classnames": "^2.2.8",
         "@types/events": "^3.0.0",
         "@types/feather-icons": "^4.7.0",
@@ -56,21 +56,21 @@
         "@types/yup": "^0.26.17",
         "@typescript-eslint/eslint-plugin": "^1.10.1",
         "@typescript-eslint/parser": "^1.10.1",
-        "babel-loader": "^8.0.5",
+        "babel-loader": "^8.0.6",
         "babel-plugin-styled-components": "^1.10.6",
         "babel-plugin-tailwind-components": "^0.5.10",
-        "css-loader": "^2.1.0",
-        "cssnano": "^4.0.3",
+        "css-loader": "^3.2.0",
+        "cssnano": "^4.1.10",
         "eslint": "^5.16.0",
         "eslint-config-standard": "^12.0.0",
         "eslint-plugin-import": "^2.17.3",
         "eslint-plugin-node": "^9.1.0",
         "eslint-plugin-promise": "^4.1.1",
         "eslint-plugin-standard": "^4.0.0",
-        "fork-ts-checker-webpack-plugin": "^0.5.2",
+        "fork-ts-checker-webpack-plugin": "^1.5.0",
         "glob-all": "^3.1.0",
         "html-webpack-plugin": "^3.2.0",
-        "mini-css-extract-plugin": "^0.5.0",
+        "mini-css-extract-plugin": "^0.8.0",
         "postcss": "^6.0.21",
         "postcss-import": "^11.1.0",
         "postcss-loader": "^3.0.0",
@@ -83,19 +83,21 @@
         "tailwindcss": "^0.7.4",
         "terser-webpack-plugin": "^1.3.0",
         "ts-loader": "^5.3.3",
-        "typescript": "^3.3.1",
-        "webpack": "^4.29.0",
+        "typescript": "^3.6.3",
+        "webpack": "^4.40.2",
         "webpack-assets-manifest": "^3.1.1",
-        "webpack-cli": "^3.0.2",
-        "webpack-dev-server": "^3.1.14",
+        "webpack-cli": "^3.3.9",
+        "webpack-dev-server": "^3.8.1",
         "webpack-manifest-plugin": "^2.0.3"
     },
     "scripts": {
         "clean": "rm -rf public/assets/*.js && rm -rf public/assets/*.css",
         "watch": "NODE_ENV=development ./node_modules/.bin/webpack --watch --progress",
         "build": "NODE_ENV=development ./node_modules/.bin/webpack --progress",
         "build:production": "NODE_ENV=production ./node_modules/.bin/webpack",
-        "serve": "yarn run clean && NODE_ENV=development webpack-dev-server --host 0.0.0.0 --hot",
-        "v:serve": "PUBLIC_PATH=https://pterodactyl.test:8080 yarn run serve --https --key /etc/ssl/private/pterodactyl.test-key.pem --cert /etc/ssl/private/pterodactyl.test.pem"
-    }
+        "serve": "yarn run clean && PUBLIC_PATH=https://pterodactyl.test:8080 NODE_ENV=development webpack-dev-server --host 0.0.0.0 --hot --https --key /etc/ssl/private/pterodactyl.test-key.pem --cert /etc/ssl/private/pterodactyl.test.pem"
+    },
+    "browserslist": [
+        "defaults"
+    ]
 }

webpack.config.js

@@ -71,24 +71,21 @@ module.exports = {
                         loader: 'babel-loader',
                         options: {
                             cacheDirectory: !isProduction,
-                            presets: ['@babel/env', '@babel/react'],
+                            presets: [
+                                '@babel/typescript',
+                                '@babel/env',
+                                '@babel/react',
+                            ],
                             plugins: [
-                                'react-hot-loader/babel',
-                                '@babel/plugin-syntax-dynamic-import',
-                                ['styled-components', {
-                                    displayName: true,
-                                }],
                                 'tailwind-components',
+                                'react-hot-loader/babel',
+                                '@babel/transform-runtime',
+                                '@babel/proposal-class-properties',
+                                '@babel/proposal-object-rest-spread',
+                                '@babel/syntax-dynamic-import',
                             ],
                         },
                     },
-                    {
-                        loader: 'ts-loader',
-                        options: {
-                            experimentalWatchApi: true,
-                            transpileOnly: true,
-                        },
-                    },
                 ],
             },
             {
@@ -97,7 +94,12 @@ module.exports = {
                     path.resolve(__dirname, 'resources'),
                 ],
                 use: [
-                    { loader: MiniCssExtractPlugin.loader },
+                    {
+                        loader: MiniCssExtractPlugin.loader,
+                        options: {
+                            hmr: !isProduction,
+                        },
+                    },
                     {
                         loader: 'css-loader',
                         options: {
@@ -157,6 +159,9 @@ module.exports = {
             }),
         ],
     },
+    watchOptions: {
+        ignored: /node_modules/,
+    },
     devServer: {
         contentBase: path.join(__dirname, 'public'),
         publicPath: _.get(process.env, 'PUBLIC_PATH', '') + '/assets/',