Migrate from Webpack to Vite for TS development #7654
Description
Vite is a modern and actively maintained alternative to bundling/developing Typescript, and can be viewed as a successor to Webpack. In the Typescript Development in Cirq RFC, we mention that, while robust, Webpack might be a bit too heavyweight and nuanced for our use case.
Issue #7159 serves as an example of this point. Upgrading chai from version 4 to 5 required a transition of the cirq-web TS framework from CommonJS to ESM, where the latter is now the official way to package Javascript code. A patch has been introduced in PR #7652, however, there may be other unforeseen issues that surface as these JS/TS frameworks develop.
As visualizations are not currently a central component of Cirq, a case can be made that ease of development and maintainability should be central components of the cirq-web sub-package. Referencing the RFC, the cases for Webpack (in the Why Webpack?) section, are all handled by natively Vite, which is ESM-native, includes native implementations for HMR and bundles using rebuild, and has it's own testing framework, vitest. A migration from Webpack to Vite would allow the core needs of cirq-web to be met in one actively maintained ecosystem, rather than piecing together disjoint packages, which is what we currently do with Webpack.
There exist other open-source Google projects that use Vite/Vitest, including:
- https://github.com/google-gemini/gemini-cli
- https://github.com/google-gemini/gemini-fullstack-langgraph-quickstart
Considering that there has not been significant feature contribution to cirq-web since 2021, now might be a good time to make this switch, as any new functionality or features could be built on a more modern foundation.