upgrade packages

Author: SerCeMan

package.json

@@ -10,35 +10,33 @@
   "license": "MIT",
   "devDependencies": {
     "@types/chrome": "^0.0.128",
-    "@types/react": "^16.9.32",
-    "@types/react-dom": "^16.9.6",
+    "@types/react": "^16.14.2",
+    "@types/react-dom": "^16.9.10",
     "@types/rsocket-core": "^0.0.6",
     "@types/rsocket-types": "^0.0.2",
     "@types/rsocket-websocket-client": "^0.0.3",
-    "clean-webpack-plugin": "^0.1.17",
-    "copy-webpack-plugin": "^4.2.0",
-    "css-loader": "^3.4.2",
+    "clean-webpack-plugin": "^3.0.0",
+    "copy-webpack-plugin": "^6.2.1",
+    "css-loader": "^5.0.1",
     "file-loader": "^6.2.0",
-    "fs-extra": "^0.30.0",
     "html-loader": "^1.3.2",
     "html-webpack-plugin": "4.5.1",
-    "node-sass": "^4.13.1",
-    "sass-loader": "^7.1.0",
-    "style-loader": "^0.20.3",
-    "ts-loader": "^4.0.1",
-    "typescript": "^3.8.0",
+    "node-sass": "^5.0.0",
+    "sass-loader": "^10.1.1",
+    "style-loader": "^2.0.0",
+    "ts-loader": "^8.0.14",
+    "typescript": "^4.1.3",
     "url-loader": "^4.1.1",
     "webpack": "^4.42.1",
-    "webpack-cli": "^3.3.11",
-    "webpack-merge": "^4.2.2"
+    "webpack-cli": "^4.3.1"
   },
   "dependencies": {
     "classnames": "^2.2.6",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0",
     "react-flex-panel": "^1.0.0",
-    "react-fontawesome": "^1.6.1",
-    "react-inspector": "^2.3.0",
+    "react-fontawesome": "^1.7.1",
+    "react-inspector": "^5.1.0",
     "rsocket-core": "^0.0.22",
     "rsocket-websocket-client": "^0.0.22"
   }

tsconfig.json

@@ -2,14 +2,13 @@
   "compilerOptions": {
     "allowSyntheticDefaultImports": true,
     "esModuleInterop": true,
-    "experimentalDecorators": true,
     "jsx": "react",
     "lib": ["ES2017", "dom"],
     "module": "commonjs",
     "moduleResolution": "node",
     "outDir": "dist/js",
     "rootDir": "src",
     "sourceMap": true,
-    "target": "es5"
+    "target": "es6"
   }
 }

webpack.common.js

@@ -1,5 +1,5 @@
 const path = require("path");
-const CleanWebpackPlugin = require("clean-webpack-plugin");
+const {CleanWebpackPlugin} = require('clean-webpack-plugin');
 const CopyWebpackPlugin = require("copy-webpack-plugin");
 const HtmlWebpackPlugin = require("html-webpack-plugin");
 
@@ -26,15 +26,9 @@ module.exports = {
         exclude: /node_modules/,
         test: /\.scss$/,
         use: [
-          {
-            loader: "style-loader" // Creates style nodes from JS strings
-          },
-          {
-            loader: "css-loader" // Translates CSS into CommonJS
-          },
-          {
-            loader: "sass-loader" // Compiles Sass to CSS
-          }
+          {loader: "style-loader"},
+          {loader: "css-loader"},
+          {loader: "sass-loader"},
         ]
       },
       {
@@ -62,22 +56,24 @@ module.exports = {
     ]
   },
   plugins: [
-    // // expose and write the allowed env vars on the compiled bundle
-    // new webpack.DefinePlugin({
-    //     "process.env.NODE_ENV": JSON.stringify(env.NODE_ENV)
-    // }),
-    new CleanWebpackPlugin("dist"),
-    new CopyWebpackPlugin([{
-      from: "src/manifest.json",
-      transform: function (content, path) {
-        // generates the manifest file using the package.json informations
-        return Buffer.from(JSON.stringify({
-          description: process.env.npm_package_description,
-          version: process.env.npm_package_version,
-          ...JSON.parse(content.toString())
-        }));
-      }
-    }]),
+    new CleanWebpackPlugin({
+      dir: "dist"
+    }),
+    new CopyWebpackPlugin({
+      patterns: [
+        {
+          from: "src/manifest.json",
+          transform: function (content, path) {
+            // generates the manifest file using the package.json informations
+            return Buffer.from(JSON.stringify({
+              description: process.env.npm_package_description,
+              version: process.env.npm_package_version,
+              ...JSON.parse(content.toString())
+            }));
+          }
+        }
+      ]
+    }),
     new HtmlWebpackPlugin({
       template: path.join(__dirname, "src/inspector.html"),
       filename: "inspector.html",
@@ -88,7 +84,6 @@ module.exports = {
       filename: "devtools.html",
       chunks: ["devtools"]
     })
-    // ,new WriteFilePlugin()
   ],
   resolve: {
     extensions: [".ts", ".tsx", ".js"]