Update all dependencies

.babelrc

@@ -5,12 +5,15 @@
       {
         "modules": "auto",
         "useBuiltIns": "usage",
-        "corejs": 2,
+        "corejs": "3.15.2",
         "debug": false
       }
     ],
     "react-app"
   ],
+  "plugins": [
+    ["@babel/plugin-proposal-private-methods", { "loose": true }]
+  ],
   "env": {
     "development": {
       "plugins": ["react-hot-loader/babel"]

package.json

@@ -15,43 +15,46 @@
     "test-ci": "jest"
   },
   "dependencies": {
-    "@babel/core": "^7.9.0",
-    "@babel/preset-env": "^7.9.5",
-    "@babel/register": "^7.9.0",
-    "babel-loader": "^8.1.0",
-    "babel-preset-react-app": "^9.1.2",
+    "@babel/core": "^7.14.6",
+    "@babel/helper-define-map": "^7.14.5",
+    "@babel/preset-env": "^7.14.7",
+    "@babel/register": "^7.14.5",
+    "babel-loader": "^8.2.2",
+    "babel-preset-react-app": "^10.0.0",
     "chrome-web-store-item-property": "^1.1.2",
-    "copy-webpack-plugin": "^5.1.1",
-    "core-js": "2",
-    "css-loader": "^2.1.0",
+    "copy-webpack-plugin": "^9.0.1",
+    "core-js": "^3.15.2",
+    "css-loader": "^6.0.0",
     "file-icons-js": "^1.0.3",
-    "file-loader": "^6.0.0",
+    "file-loader": "^6.2.0",
     "fs-extra": "^9.0.0",
     "glamor": "^3.0.0-3",
-    "hoist-non-react-statics": "^2.3.1",
-    "html-webpack-plugin": "^4.2.0",
+    "hoist-non-react-statics": "^3.3.2",
+    "html-webpack-plugin": "^5.3.2",
     "prop-types": "^15.5.8",
-    "react": "^16.7.0",
-    "react-dom": "^16.7.0",
-    "react-hot-loader": "^4.6.3",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-hot-loader": "^4.13.0",
     "react-treeview": "^0.4.7",
-    "source-map-support": "^0.4.15",
-    "style-loader": "^0.23.1",
+    "style-loader": "^3.1.0",
     "webext-domain-permission-toggle": "^1.0.0",
     "webext-dynamic-content-scripts": "^6.0.3",
-    "webpack": "^4.42.1",
-    "webpack-dev-server": "^3.10.3",
+    "webpack": "^5.45.1",
+    "webpack-dev-server": "^3.11.2",
     "write-file-webpack-plugin": "^4.5.1"
   },
   "devDependencies": {
     "cross-env": "^5.2.0",
     "husky": "^0.13.4",
-    "jest": "^25.3.0",
+    "jest": "^27.0.6",
     "sanitize-html": "^2.3.2",
     "snazzy": "^7.0.0",
-    "standard": "^12.0.1",
+    "standard": "^16.0.3",
     "webstore-upload": "^0.0.8"
   },
+  "jest": {
+    "testEnvironment": "jsdom"
+  },
   "standard": {
     "env": [
       "jest"

src/js/components/file/index.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import fileIcons from 'file-icons-js'
+import { getClassWithColor } from 'file-icons-js'
 import DiffStats from '../diffStats'
 import { StorageSync } from '../../lib'
 
@@ -39,7 +39,7 @@ class File extends React.Component {
   render () {
     const { name, href, hasComments, isDeleted, isVisible, diffStats, filter, isViewed } = this.props
     const { options = {} } = this.state
-    const className = fileIcons.getClassWithColor(name)
+    const className = getClassWithColor(name)
     const topClassName = [
       'github-pr-file',
       isVisible && 'github-pr-file-highlight',
@@ -55,16 +55,20 @@ class File extends React.Component {
         <span className={`icon ${className}`} />
         <a href={href} className='link-gray-dark'>{highlightedName}</a>
         {options.diffStats && diffStats && <DiffStats diffStats={diffStats} />}
-        {hasComments ? (
-          <svg className='github-pr-file-comment octicon octicon-comment text-gray' viewBox='0 0 16 16' width='16' height='16' aria-hidden='true'>
-            <path fillRule='evenodd' d='M14 1H2c-.55 0-1 .45-1 1v8c0 .55.45 1 1 1h2v3.5L7.5 11H14c.55 0 1-.45 1-1V2c0-.55-.45-1-1-1zm0 9H7l-2 2v-2H2V2h12v8z' />
-          </svg>
-        ) : null}
-        {isViewed ? (
-          <svg className='github-pr-file-checkmark octicon octicon-check' viewBox='0 0 12 16' version='1.1' width='12' height='16' aria-hidden='true'>
-            <path fillRule='evenodd' d='M12 5l-8 8-4-4 1.5-1.5L4 10l6.5-6.5L12 5z' />
-          </svg>
-        ) : null}
+        {hasComments
+          ? (
+            <svg className='github-pr-file-comment octicon octicon-comment text-gray' viewBox='0 0 16 16' width='16' height='16' aria-hidden='true'>
+              <path fillRule='evenodd' d='M14 1H2c-.55 0-1 .45-1 1v8c0 .55.45 1 1 1h2v3.5L7.5 11H14c.55 0 1-.45 1-1V2c0-.55-.45-1-1-1zm0 9H7l-2 2v-2H2V2h12v8z' />
+            </svg>
+            )
+          : null}
+        {isViewed
+          ? (
+            <svg className='github-pr-file-checkmark octicon octicon-check' viewBox='0 0 12 16' version='1.1' width='12' height='16' aria-hidden='true'>
+              <path fillRule='evenodd' d='M12 5l-8 8-4-4 1.5-1.5L4 10l6.5-6.5L12 5z' />
+            </svg>
+            )
+          : null}
       </div>
     )
   }

src/js/components/folder/index.jsx

@@ -13,11 +13,13 @@ class Folder extends React.Component {
     const display = (
       <div>
         {nodeLabel}
-        {isViewed ? (
-          <svg className='github-pr-file-checkmark octicon octicon-check' viewBox='0 0 12 16' version='1.1' width='12' height='16' aria-hidden='true'>
-            <path fillRule='evenodd' d='M12 5l-8 8-4-4 1.5-1.5L4 10l6.5-6.5L12 5z' />
-          </svg>
-        ) : null}
+        {isViewed
+          ? (
+            <svg className='github-pr-file-checkmark octicon octicon-check' viewBox='0 0 12 16' version='1.1' width='12' height='16' aria-hidden='true'>
+              <path fillRule='evenodd' d='M12 5l-8 8-4-4 1.5-1.5L4 10l6.5-6.5L12 5z' />
+            </svg>
+            )
+          : null}
       </div>
     )
 

src/js/components/options/index.jsx

@@ -8,14 +8,14 @@ class Options extends React.Component {
   constructor (props) {
     super(props)
     this.state = {}
-    this.updateOptions = this.updateOptions.bind(this)
+    this.handleOptions = this.handleOptions.bind(this)
   }
 
   async componentDidMount () {
     this.setState(await StorageSync.get())
   }
 
-  async updateOptions () {
+  async handleOptions () {
     await StorageSync.save()
     this.setState(await StorageSync.get())
   }
@@ -33,8 +33,7 @@ class Options extends React.Component {
             Thanks for using Better Pull Request {this.isChrome() ? 'Chrome' : 'Firefox'} Extension! 🎉
           </p>
           <p>
-            If you're enjoying this extension, please <a href={this.isChrome() ? chromeStoreUrl : firefoxStoreUrl} target='_blank'>rate it
-            on the {this.isChrome() ? 'Chrome' : 'Firefox'} Store</a>.
+            If you're enjoying this extension, please <a href={this.isChrome() ? chromeStoreUrl : firefoxStoreUrl} target='_blank' rel='noreferrer'>rate it on the {this.isChrome() ? 'Chrome' : 'Firefox'} Store</a>.
           </p>
         </div>
         <div>
@@ -44,7 +43,7 @@ class Options extends React.Component {
               id='diffStats'
               type='checkbox'
               checked={Boolean(this.state.diffStats)}
-              onChange={this.updateOptions}
+              onChange={this.handleOptions}
             />
             <span className='label-body'>Show <strong>Diff Stats</strong> next to files</span>
           </label>

src/js/components/tree/index.jsx

@@ -13,12 +13,12 @@ class Tree extends React.Component {
   constructor (props) {
     super(props)
 
-    this.onClose = this.onClose.bind(this)
+    this.handleClose = this.handleClose.bind(this)
     this.onScroll = this.onScroll.bind(this)
     this.onResizerMouseDown = this.onResizerMouseDown.bind(this)
     this.onMouseMove = this.onMouseMove.bind(this)
     this.onMouseUp = this.onMouseUp.bind(this)
-    this.onFullWidth = this.onFullWidth.bind(this)
+    this.handleFullWidth = this.handleFullWidth.bind(this)
     this.filterFiles = this.filterFiles.bind(this)
     this.onClick = this.onClick.bind(this)
 
@@ -93,7 +93,7 @@ class Tree extends React.Component {
     }
 
     this.resizeDelta = e.clientX - this.startResizeX
-    let newWidth = this.prevWidth + this.resizeDelta
+    const newWidth = this.prevWidth + this.resizeDelta
     setTimeout(() => this.setWidth(newWidth), 0)
   }
 
@@ -125,18 +125,18 @@ class Tree extends React.Component {
     }
   }
 
-  onOptions () {
+  handleOptions () {
     window.open(getBrowserApi().runtime.getURL('options.html'))
   }
 
-  onClose () {
+  handleClose () {
     const show = false
     this.setState({ show })
     document.body.classList.toggle('enable_better_github_pr', show)
     this.setWidth(0, false)
   }
 
-  onFullWidth () {
+  handleFullWidth () {
     const fullScreenState = document.querySelector('body').classList.toggle('full-width')
     window.localStorage.setItem(fullScreenStorageKey, fullScreenState)
   }
@@ -185,9 +185,9 @@ class Tree extends React.Component {
         <Actions
           filter={filter}
           filterFiles={this.filterFiles}
-          onFullWidth={this.onFullWidth}
-          onOptions={this.onOptions}
-          onClose={this.onClose}
+          onFullWidth={this.handleFullWidth}
+          onOptions={this.handleOptions}
+          onClose={this.handleClose}
         />
         <div className='file-container'>
           <div>

src/js/createTree.js

@@ -10,6 +10,7 @@ export const createTree = ({ nodeLabel, list, href, hasComments, isDeleted, diff
 
     return (
       <File
+        key={href}
         name={nodeLabel}
         href={href}
         hasComments={hasComments}
@@ -25,9 +26,9 @@ export const createTree = ({ nodeLabel, list, href, hasComments, isDeleted, diff
   const rawChildren = list.map(node => createTree({ ...node, visibleElement, filter }))
 
   return (
-    <Folder nodeLabel={nodeLabel} isViewed={rawChildren.every(child => child.props.isViewed)} >
+    <Folder key={nodeLabel} nodeLabel={nodeLabel} isViewed={rawChildren.every(child => child.props.isViewed)}>
       {rawChildren.map(node => (
-        <span key={node.nodeLabel}>
+        <span key={node.key}>
           {node}
         </span>
       ))}