chore(extension): upgrade dependencies (#689)

* cross-env and enzyme

* babel/register

* eslint and file-loader

* raw-loader

* rimraf and style-loader

* lodash and react-icons

* react-redux and redux

* prettify

extension/package.json

@@ -38,48 +38,53 @@
     "@babel/polyfill": "^7.12.1",
     "@babel/preset-env": "^7.11.0",
     "@babel/preset-react": "^7.10.4",
+    "@babel/register": "^7.12.10",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.1.0",
     "bestzip": "^2.1.7",
     "chromedriver": "^2.35.0",
     "copy-webpack-plugin": "^6.3.1",
-    "cross-env": "^1.0.8",
+    "cross-env": "^7.0.2",
     "electron": "^2.0.2",
-    "enzyme": "^2.3.0",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-15.4": "^1.4.2",
     "eslint": "^7.6.0",
-    "eslint-config-airbnb": "^0.1.0",
-    "eslint-plugin-react": "^3.2.3",
-    "file-loader": "^6.2.0",
+    "eslint-config-airbnb": "^18.2.1",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-react": "^7.21.5",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "file-loader": "^6.0.0",
     "gitbook-cli": "^2.3.0",
     "jest": "^26.2.2",
     "pug-html-loader": "^1.1.5",
-    "raw-loader": "^0.5.1",
+    "raw-loader": "^4.0.2",
     "react-addons-test-utils": "^15.4.1",
     "react-transform-catch-errors": "^1.0.0",
     "react-transform-hmr": "^1.0.1",
-    "rimraf": "^2.5.3",
+    "rimraf": "^3.0.2",
     "selenium-webdriver": "^3.0.1",
     "sinon-chrome": "^1.1.2",
-    "style-loader": "^0.18.2",
+    "style-loader": "^1.2.1",
+    "terser-webpack-plugin": "^1.1.0",
     "webpack": "^4.44.1",
     "webpack-cli": "^3.3.12"
   },
   "dependencies": {
     "jsan": "^3.1.13",
-    "lodash": "^4.17.2",
+    "lodash": "^4.17.19",
     "react": "^15.4.1",
     "react-dom": "^15.4.1",
-    "react-icons": "^2.2.1",
+    "react-icons": "^3.10.0",
     "react-json-tree": "^0.10.9",
-    "react-redux": "^4.4.5",
-    "redux": "^3.5.2",
+    "react-redux": "^5.1.2",
+    "redux": "^3.7.2",
     "redux-devtools": "^3.4.1",
     "redux-devtools-instrument": "^1.9.6",
     "remotedev-app": "^0.10.13-beta",
     "remotedev-monitor-components": "^0.0.5",
     "remotedev-serialize": "^0.1.8",
     "remotedev-slider": "^1.1.1",
-    "remotedev-utils": "0.0.1",
-    "terser-webpack-plugin": "^1.1.0"
+    "remotedev-utils": "0.0.1"
   }
 }

extension/src/app/containers/App.js

@@ -19,12 +19,13 @@ import SliderButton from 'remotedev-app/lib/components/buttons/SliderButton';
 import ImportButton from 'remotedev-app/lib/components/buttons/ImportButton';
 import ExportButton from 'remotedev-app/lib/components/buttons/ExportButton';
 import PrintButton from 'remotedev-app/lib/components/buttons/PrintButton';
-import SettingsIcon from 'react-icons/lib/md/settings';
-import LeftIcon from 'react-icons/lib/md/border-left';
-import RightIcon from 'react-icons/lib/md/border-right';
-import BottomIcon from 'react-icons/lib/md/border-bottom';
-import RemoteIcon from 'react-icons/lib/go/radio-tower';
-import PersistIcon from 'react-icons/lib/go/pin';
+import {
+  MdSettings,
+  MdBorderLeft,
+  MdBorderRight,
+  MdBorderBottom,
+} from 'react-icons/md';
+import { GoRadioTower, GoPin } from 'react-icons/go';
 
 @enhance
 class App extends Component {
@@ -96,7 +97,7 @@ class App extends Component {
         <div style={styles.buttonBar}>
           {!window.isElectron && position !== '#left' && (
             <Button
-              Icon={LeftIcon}
+              Icon={MdBorderLeft}
               onClick={() => {
                 this.openWindow('left');
               }}
@@ -104,7 +105,7 @@ class App extends Component {
           )}
           {!window.isElectron && position !== '#right' && (
             <Button
-              Icon={RightIcon}
+              Icon={MdBorderRight}
               onClick={() => {
                 this.openWindow('right');
               }}
@@ -112,7 +113,7 @@ class App extends Component {
           )}
           {!window.isElectron && position !== '#bottom' && (
             <Button
-              Icon={BottomIcon}
+              Icon={MdBorderBottom}
               onClick={() => {
                 this.openWindow('bottom');
               }}
@@ -121,7 +122,7 @@ class App extends Component {
           {features.pause && <RecordButton paused={liftedState.isPaused} />}
           {features.lock && <LockButton locked={liftedState.isLocked} />}
           {features.persist && (
-            <Button Icon={PersistIcon} onClick={togglePersist}>
+            <Button Icon={GoPin} onClick={togglePersist}>
               Persist
             </Button>
           )}
@@ -136,7 +137,7 @@ class App extends Component {
               navigator.userAgent.indexOf('Firefox') !== -1) && <PrintButton />}
           {!window.isElectron && (
             <Button
-              Icon={RemoteIcon}
+              Icon={GoRadioTower}
               onClick={() => {
                 this.openWindow('remote');
               }}
@@ -146,7 +147,7 @@ class App extends Component {
           )}
           {(chrome.runtime.openOptionsPage ||
             navigator.userAgent.indexOf('Firefox') !== -1) && (
-            <Button Icon={SettingsIcon} onClick={this.openOptionsPage}>
+            <Button Icon={MdSettings} onClick={this.openOptionsPage}>
               Settings
             </Button>
           )}

extension/src/browser/extension/inject/pageScriptWrap.js

@@ -2,7 +2,7 @@ let s = document.createElement('script');
 s.type = 'text/javascript';
 
 if (process.env.NODE_ENV === 'production') {
-  const script = require('raw-loader!tmp/page.bundle.js');
+  const { default: script } = require('raw-loader!tmp/page.bundle.js');
   s.appendChild(document.createTextNode(script));
   (document.head || document.documentElement).appendChild(s);
   s.parentNode.removeChild(s);

extension/test/setup.js

@@ -1,2 +1,6 @@
 require('@babel/polyfill');
 global.chrome = require('sinon-chrome');
+import Enzyme from 'enzyme';
+import Adapter from 'enzyme-adapter-react-15.4';
+
+Enzyme.configure({ adapter: new Adapter() });