CI - enforce dep usage with depcheck (#11518)

* deps - validate with depcheck

* ci - add depcheck + fixes for missing/extra deps

* ci - run depcheck after deps prep install

* deps - add yarn-deduplicate development tool

* Update .circleci/config.yml

Co-authored-by: Mark Stacey <markjstacey@gmail.com>

* Update .circleci/config.yml

Co-authored-by: Mark Stacey <markjstacey@gmail.com>

* Removing @lavamoat/preinstall-always-fail

* [depcheck] removing unused dependencies

* Update .depcheckrc.yml

Co-authored-by: Mark Stacey <markjstacey@gmail.com>
Co-authored-by: ryanml <ryanlanese@gmail.com>

.circleci/config.yml

@@ -25,7 +25,10 @@ workflows:
               only:
                 - /^Version-v(\d+)[.](\d+)[.](\d+)/
       - prep-deps
-      - test-deps
+      - test-deps-audit
+      - test-deps-depcheck:
+          requires:
+            - prep-deps
       - validate-lavamoat-config:
           filters:
             branches:
@@ -313,7 +316,7 @@ jobs:
                 command: yarn auto-changelog validate --rc
 
 
-  test-deps:
+  test-deps-audit:
     executor: node-browsers
     steps:
       - checkout
@@ -323,6 +326,16 @@ jobs:
           name: yarn audit
           command: .circleci/scripts/yarn-audit.sh
 
+  test-deps-depcheck:
+    executor: node-browsers
+    steps:
+      - checkout
+      - attach_workspace:
+          at: .
+      - run:
+          name: depcheck
+          command: yarn depcheck
+
   test-e2e-chrome:
     executor: node-browsers
     steps:

.depcheckrc.yml

@@ -0,0 +1,47 @@
+# things that *are* used, that depcheck is wrong about
+ignores:
+  # 
+  # webapp deps
+  # 
+
+  - "@babel/runtime"
+  - "@fortawesome/fontawesome-free"
+  - "punycode"
+  
+  # 
+  # dev deps
+  #
+  
+  # safety fallback for npm lifecycle scripts, not used normally
+  - "@lavamoat/preinstall-always-fail"
+  # used in testing + ci
+  - "@metamask/auto-changelog" # invoked as `auto-changelog`
+  - "@metamask/forwarder"
+  - "@metamask/test-dapp"
+  - "chromedriver"
+  - "geckodriver"
+  - "ganache-cli"
+  - "lavamoat-viz"
+  - "@sentry/cli" # invoked as `sentry-cli`
+  - "prettier-plugin-sort-json" # automatically imported by prettier
+  - "source-map-explorer"
+  - "depcheck" # ooo meta
+  # development tool
+  - "yarn-deduplicate"
+  # storybook
+  - "@storybook/core"
+  - "@storybook/addon-backgrounds"
+  - "@storybook/addon-toolbars"
+  - "style-loader"
+  - "css-loader"
+  - "sass-loader"
+  - "resolve-url-loader"
+
+# files depcheck should not parse 
+ignorePatterns:
+  # seems to incorrectly parse scss @include pragmas?
+  - "**/*.scss"
+  # self-contained bundle used for testing
+  - "**/send-eth-with-private-key-test/web3js.js"
+  - "**/send-eth-with-private-key-test/ethereumjs-tx.js"
+  

package.json

@@ -99,7 +99,6 @@
     "@ethereumjs/tx": "^3.2.1",
     "@formatjs/intl-relativetimeformat": "^5.2.6",
     "@fortawesome/fontawesome-free": "^5.13.0",
-    "@lavamoat/preinstall-always-fail": "^1.0.0",
     "@material-ui/core": "^4.11.0",
     "@metamask/contract-metadata": "^1.28.0",
     "@metamask/controllers": "^12.0.0",
@@ -136,7 +135,6 @@
     "eth-json-rpc-middleware": "^6.0.0",
     "eth-keyring-controller": "^6.2.0",
     "eth-method-registry": "^2.0.0",
-    "eth-phishing-detect": "^1.1.14",
     "eth-query": "^2.1.2",
     "eth-rpc-errors": "^4.0.2",
     "eth-sig-util": "^3.0.0",
@@ -193,7 +191,6 @@
     "readable-stream": "^2.3.3",
     "redux": "^4.0.5",
     "redux-thunk": "^2.3.0",
-    "requirejs": "^2.3.6",
     "reselect": "^3.0.1",
     "rpc-cap": "^3.2.1",
     "safe-event-emitter": "^1.0.1",
@@ -233,6 +230,9 @@
     "@storybook/addon-backgrounds": "^6.1.17",
     "@storybook/addon-knobs": "^6.1.17",
     "@storybook/addon-toolbars": "^6.1.17",
+    "@storybook/addons": "^6.1.7",
+    "@storybook/api": "^6.1.7",
+    "@storybook/components": "^6.1.7",
     "@storybook/core": "^6.1.17",
     "@storybook/react": "^6.1.17",
     "@storybook/storybook-deployer": "^2.8.7",
@@ -243,9 +243,7 @@
     "addons-linter": "1.14.0",
     "babelify": "^10.0.0",
     "bify-module-groups": "^1.0.0",
-    "bify-vinyl-gator": "^1.0.0",
     "brfs": "^2.0.2",
-    "browser-pack": "^6.1.0",
     "browserify": "^16.5.1",
     "chalk": "^3.0.0",
     "chromedriver": "^79.0.0",
@@ -256,6 +254,7 @@
     "css-to-xpath": "^0.1.0",
     "del": "^3.0.0",
     "duplexify": "^4.1.1",
+    "depcheck": "^1.4.2",
     "enzyme": "^3.10.0",
     "enzyme-adapter-react-16": "^1.15.1",
     "eslint": "^7.23.0",
@@ -273,7 +272,6 @@
     "ganache-cli": "^6.12.1",
     "ganache-core": "^2.13.1",
     "geckodriver": "^1.21.0",
-    "get-port": "^5.1.0",
     "gulp": "^4.0.2",
     "gulp-autoprefixer": "^5.0.0",
     "gulp-dart-sass": "^1.0.2",
@@ -312,7 +310,6 @@
     "sass": "^1.32.4",
     "sass-loader": "^10.1.1",
     "selenium-webdriver": "4.0.0-alpha.7",
-    "semver": "^7.3.5",
     "serve-handler": "^6.1.2",
     "sinon": "^9.0.0",
     "source-map": "^0.7.2",
@@ -329,7 +326,8 @@
     "vinyl-sourcemaps-apply": "^0.2.1",
     "watchify": "^3.11.1",
     "webpack": "^4.41.6",
-    "yargs": "^17.0.1"
+    "yargs": "^17.0.1",
+    "yarn-deduplicate": "^3.1.0"
   },
   "engines": {
     "node": "^14.15.1",