Audit-fix dependencies

[compulim]

Related #4522.

Changelog Entry

(No CHANGELOG update for audit fix)

Description

Running npm audit fix on all packages and samples.

We added a few helper scripts to do the work because this is not trivial:

• We are using Lerna and NPM doesn't understand it
  • npm audit fix and npm install my-package will not work on package.json with local peer dependencies
  • Solution: to run npm audit fix or npm install my-package, we need to remove local peer dependencies from package.json before npm audit fix and restore them afterward
  • However, NPM will remove symlinks to local peer dependencies, need lerna bootstrap to fix symlinks
  • This is doable but tedious as we have 20+ package.json
• Need to go through each folder individually, rather than using lerna exec
  • Our samples are not in part of our mono-repo, it is just package.json sitting next to the code
  • lerna exec will not run for our samples, thus, we need to go through each folder individually

We added a few scripts to simplify our work. For simplicity and debuggability, these scripts will only work under WSL2/Linux. As these are very advanced scripts and not used on daily basis, it is okay to trade limitations for simplicity.

• npm run audit
  • Run npm audit against every package.json under /packages/ and /samples/
• npm run auditfix
  • This literally run npm audit fix against every package.json under /packages/ and /samples/
  • Before running npm audit fix, it will remove local peer dependencies from package.json and restore them afterward
  • After running npm audit fix, must run lerna bootstrap again because NPM will break symlinks of local dependencies
• Updated npm run bump
  • Bump all dependencies to @latest by running npm install my-package@latest against every package.json under /packages/ and /samples/
    • Those marked in package.json/skipBump will not be bumped
    • For package.json under /packages/, we will use exact version for dependencies and caret version for devDependencies
  • It will remove local peer dependencies from package.json and restore them afterward
  • After running npm run bump, must run lerna bootstrap again because NPM will break symlinks of local dependencies

After this PR, the only issue left should be nth-check which is used by react-scripts (a.k.a. create-react-scripts). This is not fixable until react-scripts fixed their code.

Design

Because we are using Lerna to maintain our mono-repo, running npm audit fix under Lerna is not trivial. Despite counterintuitive and we already have many NPM scripts, we added some helper scripts to simplify the work. For some other reasons, currently, we could not use NPM workspaces.

Normally, before running npm audit fix or npm install on a package.json in the Lerna-maintained mono-repo:

1. Remove all local peer dependencies from package.json/dependencies and package.json/devDependencies
2. Run npm audit fix or npm install
3. Restore all removed local peer dependencies
4. Run lerna bootstrap to restore all symlinks for peer dependencies

The new scripts will automate these steps by introducing a few new fields in the package.json:

• localPeerDependencies is very similar to dependencies but only local peer dependencies are listed
• localPeerDevDependencies is very similar to devDependencies but only local peer development dependencies are listed
• skipBump indicates what dev/dependencies should not be bumped to @latest
  • For example, node-fetch@^3 does not support CommonJS. Before we upgrade our code to ES Modules, we need to continue to use node-fetch@^2. We should skip bumping node-fetch

In the future, we should build a GitHub bot to run npm run auditfix and npm run bump. This will make pull request approval much faster.

Specific Changes

• Update all package.json to include new audit, auditfix, and bump scripts

• I have added tests and executed them locally
• I have updated CHANGELOG.md
• I have updated documentation

Review Checklist

This section is for contributors to review your work.

• ~Accessibility reviewed (tab order, content readability, alt text, color contrast)
• Browser and platform compatibilities reviewed
• CSS styles reviewed (minimal rules, no z-index)
• Documents reviewed (docs, samples, live demo)
• Internationalization reviewed (strings, unit formatting)
• package.json and package-lock.json reviewed
• Security reviewed (no data URIs, check for nonce leak)
• ~Tests reviewed (coverage, legitimacy)