PLIP (Plone Improvement Proposal)

Responsible Persons

Proposer: Víctor Fernández de Alba (@sneridagh)

Seconder: Timo Stollenwerk (@tisto)

Abstract

Volto, as any other modern JS application, relies on a bundler for producing builds of the transpiled and transformed code for production deployments and support for a full fledged development environment.

Volto is using currently Razzle as a bundler, however it has become obsolete and completely abandoned in the last years. This situation created a huge technical debt in a key element of the product. Volto can’t use some of the latest tooling or development experience improvements that the React ecosystem has provided during the last years.

After a study of the alternatives in the React ecosystem, it’s been decided to use Vite. This bundler has become the standard “de facto” bundler of many modern JS frameworks and apps. It’s flexible, pluggable, extensible and fast. It does not use Webpack (since Webpack is becoming problematic lately), but ESbuild and Rollup for the production bundling.

Assumptions

Vite is ESM, so it’s also future ready. This, along with the fact that it does not uses Webpack forced us to take some decisions and push for some breaking changes. All of them have a good reason behind them and in summary, it will resut in better and modern code using ESM and React artifacts, instead of relying on Razzle and Webpack magic.

Breaking changes

• Config from project - create-addons-loader will no longer load the config from the project itself.
• lodash-es must be used instead of lodashbecause the latter is not compatible with ESM.
• @loadable/component and Volto’s Loadables support only works for Webpack based builds, so they will be replaced them with standard React lazy instances.
• The index.js barrel import files are removed for allowing the build to better chunk splitting thanks to the above.
• doesNotContainClick from semantic-ui-react will be adopted in now core
• Globals __CLIENT__ and __SERVER__ have to be replaced with import.meta.env.SSR

All of them will be deprecated in Volto 18 so their use is already discouraged from Volto 18 on.

Deliverables

Removal of all Razzle artifacts, Webpack plugins, unused Babel plugins and config. Removal of related libraries from the devDependencies.

Except for the above deprecations and breaking changes the code and libraries used in Volto should not be changed, defining a baseline in which base future improvements that will be taking place in other PRs.

The result must pass all the existing tests and be linted following the existing configuration.

Risks

The breaking changes introduced will force to run upgrade steps not only in the project's code, but also in add-ons. All Razzle artifacts will have to be removed or updated. Add-ons maintainers will have to release major versions of them, and maintain compatibility matrixes to communicate properly which versions are ready for the new Vite buids.

We need to write outstanding documentation in order to make the process the smoothest possible.

Proposal & Implementation

The current work is at 70% and done in this PR:
#6050

Participants

Víctor Fernández de Alba (@sneridagh)
Piero Nicolli (@pnicolli)
Volto Team (@plone/volto-team)