Webpack to Vite

[seunomonije]

Resolves #7654, sunsetting Webpack support and introducing the more modern Vite as the core bundler for typescript in Cirq.

Implementation notes:

• Added a custom canvas polyfill in vitest.setup.ts, allowing for three.js to be tested without the browser environment. There have been discussions about this in Vite and external packages which could offer more context, but I opted to implement something custom considering that package deps have been pain point.
• Testing and coverage matches 1:1 with old test criteria
• We need to bump the node version up in the CI workflow to support more modern packages, bumped from v20 -> v22

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 99.37%. Comparing base (3b3cd7d) to head (85308df).
⚠️ Report is 1 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #7687   +/-   ##
=======================================
  Coverage   99.37%   99.37%           
=======================================
  Files        1089     1089           
  Lines       97539    97539           
=======================================
  Hits        96934    96934           
  Misses        605      605           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[pavoljuhas]

LGTM, Thank you for fixing this!

[pavoljuhas]

@seunomonije - I am not able to run check/ts-build after this PR; the failure was, unfortuntately, silently ignored by the check/ts-build-current CI.

If I try to run it locally the script advises

CLI for webpack must be installed.
  webpack-cli (https://github.com/webpack/webpack-cli)

We will use "npm" to install the CLI via "npm install -D webpack-cli".

After installing webpack-cli the check/ts-build fails with a different error:

$ check/ts-build
Entrypoint main =

ERROR in main
Module not found: Error: Can't resolve './src' in '/home/user/quantumlib/Cirq/cirq-web/cirq_web'
resolve './src' in '/home/user/quantumlib/Cirq/cirq-web/cirq_web'
  using description file: /home/user/quantumlib/Cirq/cirq-web/cirq_web/package.json (relative path: .)
    Field 'browser' doesn't contain a valid alias configuration
...

Is there an easy fix for this or should we roll-back?

[seunomonije]

@pavoljuhas will look at this in a bit and have something for you within a few hours

It looks like we need to remove the dependency on webpack and point it to the new Vite work, it doesn't look like an involved fix off of a first look

[seunomonije]

The solution will be to move away from the webpack bundler in the check script, which I missed due to the silent failing in the CI.

The culprit lines are here, where we're still using webpack even though it's no longer supported.

First attempt will be to change this to just vite build, just like what we changed in the PR. I will test it and report back.

[pavoljuhas]

@seunomonije - sounds great, thank you for prompt response!

[seunomonije]

Ok so I have identified the issue and proposed a fix in a draft PR #7697

This draft PR successfully checks the bundle files are produced, and also completes the e2e tests, showing this new pipeline's artifacts match the existing pictures from the legacy Webpack bundler.

Info on the issue: it stems from the fact that Vite does not allow you to export build information in an array (see here, and here). In the last PR, I made a mistake during development and pushed up bundle.js files that passed the e2e test cases but were not built by the Vite pipeline, and missed it, hence the ts-build-current problem.

The reason this #7697 is still in draft is that the bundle files are much bigger than the last ones, and I would like to spend a bit more time researching if there is a cleaner way to handle the config file. After spending ~2 hours researching I haven't come across a "no-brainer" solution, but I'd like to investigate a bit more before feeling good about it. That being said, this patch is functional enough fix the issue, and happy to be helpful wherever is best.

@pavoljuhas