chore: remove uneccessary dependencies

Author: otakustay

.eslintrc.js

@@ -1,6 +1,6 @@
 module.exports = {
     extends: '@ecomfe/eslint-config/strict',
-    plugins: ['jest'],
+    plugins: ['jest', 'react-hooks'],
     env: {
         'jest/globals': true
     },
@@ -13,6 +13,8 @@ module.exports = {
         'import/no-unresolved': [
             'error',
             {ignore: ['react-diff-view']}
-        ]
+        ],
+        'react-hooks/rules-of-hooks': 'error',
+        'react-hooks/exhaustive-deps': 'error'
     }
 };

package.json

@@ -23,7 +23,6 @@
   "license": "MIT",
   "dependencies": {
     "classnames": "^2.2.6",
-    "core-js": "^3.3.4",
     "diff-match-patch": "^1.0.4",
     "recompose": "^0.30.0",
     "shallow-equal": "^1.2.0",
@@ -47,7 +46,7 @@
     "babel-plugin-import": "^1.12.2",
     "babel-plugin-lodash": "^3.3.4",
     "babel-plugin-react-require": "^3.0.1",
-    "copy-webpack-plugin": "^5.0.4",
+    "core-js": "^3.3.4",
     "css-loader": "^3.2.0",
     "enzyme": "^3.10.0",
     "enzyme-adapter-react-16": "^1.15.1",
@@ -56,26 +55,22 @@
     "eslint-plugin-import": "^2.18.2",
     "eslint-plugin-jest": "^22.21.0",
     "eslint-plugin-react": "^7.16.0",
+    "eslint-plugin-react-hooks": "^2.2.0",
     "gitdiff-parser": "^0.1.2",
     "html-webpack-plugin": "^3.0.6",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^24.9.0",
     "less": "^3.10.3",
     "less-loader": "^5.0.0",
     "lodash": "^4.17.15",
-    "lodash-decorators": "^6.0.1",
-    "prism-themes": "^1.3.0",
     "raw-loader": "^3.1.0",
     "react": "^16.11.0",
     "react-dom": "^16.11.0",
     "react-infinite-scroller": "^1.2.4",
-    "react-kiss": "^1.2.0",
     "react-markdown": "^4.2.2",
     "react-test-renderer": "^16.11.0",
     "react-timeago": "^4.1.9",
-    "react-whether": "^1.0.1",
     "refractor": "^2.10.0",
-    "reselect": "^4.0.0",
     "rollup": "^1.25.2",
     "rollup-plugin-auto-external": "^2.0.0",
     "rollup-plugin-babel": "^4.3.3",
@@ -87,10 +82,7 @@
     "rollup-plugin-sourcemaps": "^0.4.2",
     "rollup-plugin-terser": "^5.1.2",
     "sha1": "^1.1.1",
-    "shallow-changes": "^1.0.2",
-    "short-hash": "^1.0.0",
     "style-loader": "^1.0.0",
-    "svg-react-loader": "^0.4.6",
     "unidiff": "^1.0.2",
     "webpack": "^4.41.2",
     "webpack-cli": "^3.3.9",

site/components/DiffView/Unfold.js

@@ -1,6 +1,5 @@
-import {PureComponent} from 'react';
+import {useCallback} from 'react';
 import {Icon} from 'antd';
-import {bind} from 'lodash-decorators';
 import {Decoration} from 'react-diff-view';
 import styles from './Unfold.less';
 
@@ -10,26 +9,23 @@ const ICON_TYPE_MAPPING = {
     none: 'plus-circle',
 };
 
-export default class Unfold extends PureComponent {
+const Unfold = ({start, end, direction, onExpand, ...props}) => {
+    const expand = useCallback(
+        () => onExpand(start, end),
+        [onExpand, start, end]
+    );
 
-    @bind()
-    expand() {
-        const {start, end, onExpand} = this.props;
-        onExpand(start, end);
-    }
+    const iconType = ICON_TYPE_MAPPING[direction];
+    const lines = end - start;
 
-    render() {
-        const {start, end, direction, ...props} = this.props;
-        const iconType = ICON_TYPE_MAPPING[direction];
-        const lines = end - start;
+    return (
+        <Decoration {...props}>
+            <div className={styles.root} onClick={expand}>
+                <Icon type={iconType} />
+                &nbsp;Expand hidden {lines} lines
+            </div>
+        </Decoration>
+    );
+};
 
-        return (
-            <Decoration {...props}>
-                <div className={styles.root} onClick={this.expand}>
-                    <Icon type={iconType} />
-                    &nbsp;Expand hidden {lines} lines
-                </div>
-            </Decoration>
-        );
-    }
-}
+export default Unfold;

site/components/DiffView/UnfoldCollapsed.js

@@ -1,5 +1,3 @@
-import {Fragment} from 'react';
-import {Whether} from 'react-whether';
 import {getCollapsedLinesCountBetween} from 'react-diff-view';
 import Unfold from './Unfold';
 
@@ -13,12 +11,19 @@ const UnfoldCollapsed = ({previousHunk, currentHunk, linesCount, onExpand}) => {
         }
 
         return (
-            <Fragment>
-                <Whether matches={collapsedLines > 10}>
-                    <Unfold direction="down" start={nextStart} end={nextStart + 10} onExpand={onExpand} />
-                </Whether>
+            <>
+                {
+                    collapsedLines > 10 && (
+                        <Unfold
+                            direction="down"
+                            start={nextStart}
+                            end={nextStart + 10}
+                            onExpand={onExpand}
+                        />
+                    )
+                }
                 <Unfold direction="none" start={nextStart} end={linesCount + 1} onExpand={onExpand} />
-            </Fragment>
+            </>
         );
     }
 
@@ -32,12 +37,19 @@ const UnfoldCollapsed = ({previousHunk, currentHunk, linesCount, onExpand}) => {
         const start = Math.max(currentHunk.oldStart - 10, 1);
 
         return (
-            <Fragment>
+            <>
                 <Unfold direction="none" start={1} end={currentHunk.oldStart} onExpand={onExpand} />
-                <Whether matches={collapsedLines > 10}>
-                    <Unfold direction="up" start={start} end={currentHunk.oldStart} onExpand={onExpand} />
-                </Whether>
-            </Fragment>
+                {
+                    collapsedLines > 10 && (
+                        <Unfold
+                            direction="up"
+                            start={start}
+                            end={currentHunk.oldStart}
+                            onExpand={onExpand}
+                        />
+                    )
+                }
+            </>
         );
     }
 
@@ -51,11 +63,11 @@ const UnfoldCollapsed = ({previousHunk, currentHunk, linesCount, onExpand}) => {
     }
 
     return (
-        <Fragment>
+        <>
             <Unfold direction="down" start={collapsedStart} end={collapsedStart + 10} onExpand={onExpand} />
             <Unfold direction="none" start={collapsedStart} end={collapsedEnd} onExpand={onExpand} />
             <Unfold direction="up" start={collapsedEnd - 10} end={collapsedEnd} onExpand={onExpand} />
-        </Fragment>
+        </>
     );
 };
 

src/Hunk/SplitHunk/SplitChange.js

@@ -13,18 +13,17 @@ const SIDE_NEW = 1;
 const useCallbackOnSide = (side, setHover, change, customCallbacks) => {
     const markHover = useCallback(() => setHover(side), [side, setHover]);
     const unmarkHover = useCallback(() => setHover(''), [setHover]);
-    const arg = {side, change};
     // Unlike selectors, hooks do not provide native functionality to customize comparator,
     // on realizing that this does not reduce amount of renders, only preventing duplicate merge computations,
     // we decide not to optimize this extremely, leave it recomputed on certain rerenders.
     const callbacks = useMemo(
         () => {
-            const callbacks = mapValues(customCallbacks, fn => () => fn(arg));
+            const callbacks = mapValues(customCallbacks, fn => () => fn({side, change}));
             callbacks.onMouseEnter = composeCallback(markHover, callbacks.onMouseEnter);
             callbacks.onMouseLeave = composeCallback(unmarkHover, callbacks.onMouseLeave);
             return callbacks;
         },
-        [change, customCallbacks, markHover, unmarkHover]
+        [change, customCallbacks, markHover, side, unmarkHover]
     );
     return callbacks;
 };

src/Hunk/UnifiedHunk/UnifiedChange.js

@@ -14,7 +14,7 @@ const useBoundCallbacks = (callbacks, arg, hoverOn, hoverOff) => useMemo(
         output.onMouseLeave = composeCallback(hoverOff, output.onMouseLeave);
         return output;
     },
-    [callbacks, arg]
+    [callbacks, hoverOn, hoverOff, arg]
 );
 
 const useBoolean = () => {

src/hooks/useTokenizeWorker.js

@@ -73,7 +73,7 @@ export default (worker, payload, options = {}) => {
             };
             worker.postMessage(data);
         },
-        // eslint-disable-next-line: react-hooks/exhaustive-deps
+        // eslint-disable-next-line react-hooks/exhaustive-deps
         [payloadIdentifier, worker, shouldTokenize] // TODO: How about worker changes when payload keeps identical?
     );