I am planning on doing 3 updates in the following order: npm → React → Webpack, and will go into details on what updates I’m doing and why.
Updating now will make it easier to maintain and update later on.
Updating usually requires changing some of our code, updating it now when everything works fine means we can do it carefully and take our time.
The main change here is in foreman-js and everyone that doesn’t contribute to foreman-js can keep using which npm version they like.
Unlike in foreman core and plugins, in foreman-js we save the package-lock.json file for stability.
Currently we install foreman-js using npm v6 (that’s why the package-lock.json is version 1: package-lock.json | npm Docs)
When installing using npm7+ the lock file is built in version 2 which is backwards compatible to v1 lockfiles.
It’s time - End of life - April 2023 (Like node 14 Should I update my npm version or use the one node.js provides? - Stack Overflow )
Automatically installing js peer dependencies
Use workspaces later for foreman-js building process (workspaces | npm Docs)
The lockfile v2 (package-lock.json), which is built when installing using npm7+, unlocks the ability to do deterministic and reproducible builds to produce a package tree.
- Min node version that we can use is 12 for this version of npm and some parts of packaging use node 10
- NPM peerDependencies issue
- other broken peer dependencies
- For users that don’t want to deal with it:
- can add
- can add
- For js developers that have to deal with it :
- Update react-dnd to 11.1.3 (where react version is still 16)
- Update stories webpack to v4.43
- Update stories “sass-loader”: “^10.2.0”,
- Update react-ellipsis-with-tooltip: update react-bootstrap and react by MariaAga · Pull Request #18 · amirfefer/react-ellipsis-with-tooltip · GitHub or add the missing peer dependency
- And more updates
We use 16.9.
Previous update to 17 had to be reverted because pf3 tooltips stopped working: Fixes #30787 - upgrade js vendor to 8.3.0 by MariaAga · Pull Request #7963 · theforeman/foreman · GitHub
Solution: remove all uses of
overlayTrigger Refactor #34713: Remove PatternFly 3 OverlayTrigger - Foreman
Changes mostly foreman-js and react-dom use in foreman core
- Automatic Batching: Batching is when React groups multiple state updates into a single re-render for better performance.
- More React things to use: https://reactjs.org/blog/2022/03/29/react-v18.html
- React-dom changes
- delete most of our react-dom use here: https://github.com/theforeman/foreman/pull/9212
* update the rest of the react-dom uses in this file is much less complicated once the most is deleted
- Packages have react 16 as peer dependencies
Solution: npm8 will automatically install peerDependencies
We use 3 for a very long time as updating it has been challenging.
Really basic draft:
Changes only foreman core
- It’s really time as it keeps us from updating many packages and using newer node versions
- Webpack 3 is not supported anymore and its documentation is hosted by 3rd parties Access to v3 doc? · Issue #1854 · webpack/webpack.js.org · GitHub
- We can’t update some packages because their minimum webpack version is 4
- We can’t use node 16+ Which node versions do we support? - #3 by tbrisker
- Node 14 end of life is around April 2023 Node.js | endoflife.date
- In most cases webpack 4 is faster 🎼webpack 4: released today!!✨. Codename: Legato 🎶 | by Sean T. Larkin | webpack | Medium
- No one is sure how we build the ui
- Using plugins - when using webpack 3 we could not use tree shaking and minifications because it will cause plugins to stop working.
- Common chunks plugin is no longer used
- In the draft pr, the –analyze shows that the bundles are ~x2 larger than before the PR