Node 20 -> 22

[birkskyum]

22 has been the lts for 7 months now, so i think we're plenty safe to use it.

https://endoflife.date/nodejs

CI breaks because of cache of canvas in node_modules

Launch Checklist

• Confirm your changes do not include backports from Mapbox projects (unless with compliant license) - if you are not sure about this, please ask!
• Briefly describe the changes in this PR.
• Link to related issues.
• Include before/after visuals or gifs if this PR includes visual changes.
• Write tests for all new functionality.
• Document any changes to public APIs.
• Post benchmark scores.
• Add an entry to CHANGELOG.md under the ## main section.

[HarelM]

I like it that there's a need to change only in one place! Having said that, CI need more tender love and care...

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 91.33%. Comparing base (30ab703) to head (689f2fe).

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #5097      +/-   ##
==========================================
- Coverage   91.81%   91.33%   -0.48%     
==========================================
  Files         279      279              
  Lines       38340    38340              
  Branches     6698     6663      -35     
==========================================
- Hits        35200    35017     -183     
- Misses       3007     3178     +171     
- Partials      133      145      +12     

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

---

🚨 Try these New Features:

• JS Bundle Analysis - Avoid shipping oversized bundles

[birkskyum]

@HarelM , CI is a lot better now.

Basically, 2 things.

1. The "canvas" package was causing trouble with installation. I see this a lot. They are solving it with their v3, of which I here use a pre-release, which doesn't require manual rebuilds of the package on isntallation. It's being used only for the Offscreen Canvas tests below:

maplibre-gl-js/src/util/util.test.ts

Lines 458 to 462 in 30ab703

	describe('util readImageDataUsingOffscreenCanvas', () => {
	test('reads pixels from image', async () => {
	(window as any).OffscreenCanvas = Canvas;
	const image = new Canvas(2, 2);
	const context = image.getContext('2d');

maplibre-gl-js/src/util/offscreen_canvas_distorted.test.ts

Lines 6 to 14 in 30ab703

	test('normal operation does not mangle canvas', () => {
	const OffscreenCanvas = (window as any).OffscreenCanvas = vi.fn((width:number, height: number) => {
	return new Canvas(width, height);
	});
	expect(offscreenCanvasSupported()).toBeTruthy();
	OffscreenCanvas.mockClear();
	expect(isOffscreenCanvasDistorted()).toBeFalsy();
	expect(OffscreenCanvas).toHaveBeenCalledTimes(1);
	});

2. npm began complaining a lot here, leaving me only two options; add the --legacy-peer-deps flags, or move to a more modern package manager like pnpm that wouldn't have a problem in the first place.

[HarelM]

Can we replace the canvas package with a vitest package somehow? I don't like using non-official packages...

Also, what's the error you get that needs legacy peer deps flag?

[birkskyum]

The error is that JSDOM has a peer dependency on "canvas": 2.x, and this upgrades to canvas 3.x. Canvas 3.x is breaking in the sense that it dropped support for Node 16, but JSDOM will still work perfectly fine with it.

[HarelM]

Is there a JSDom version that "is compatible" with canvas 3? Maybe a pre-release of JSDom?
Otherwise I would consider waiting for official releases of these packages...