Convert `let` and `const` in maplibre to enable es5 test

[archmoj]

@birkskyum if you recall, we had to disable the es5 tests in https://github.com/plotly/plotly.js/pull/7060. I was wondering if you could simply try replacing some const and let to var in the maplibre bundle (or give webpack config another try https://github.com/plotly/plotly.js/pull/7015#discussion_r1629651376) and investigate if we could enable es5 test for a bit longer until switching to es6 in #6909? Thank you!

[birkskyum]

I've tried a few things, including making an es5 build of the unminified production build of maplibre, and loading it in / rebuilding, but for the no-new-func, i still see these:

The no-es6-dist appear to pass though - what error do you see there?

[archmoj]

@birkskyum please note that it is actually the second test catches these (not the es6 test). Also to test it locally you needed to build the bundles in dist folder. So what the error you displayed in the image below is the one we need to possibly fix.

[birkskyum]

Okay, so the first test can be re-enabled already. For the no-new-func, I'm not sure which const and let assignments it's flagging.

[birkskyum]

is there a plotly-map similar to the plotly-mapbox that we can use to narrow down the issue and make new builds faster?

[archmoj]

It's coming from

let supportsOffscreenCanvas;
function offscreenCanvasSupported() {
    if (supportsOffscreenCanvas == null) {
        supportsOffscreenCanvas = typeof OffscreenCanvas !== 'undefined' &&
            new OffscreenCanvas(1, 1).getContext('2d') &&
            typeof createImageBitmap === 'function';
    }
    return supportsOffscreenCanvas;
}

[birkskyum]

The errors I get mention a use of const. I tried loading in a es5 build of maplibre where that specific section looks like this:

var supportsOffscreenCanvas;
function offscreenCanvasSupported() {
    if (supportsOffscreenCanvas == null) {
        supportsOffscreenCanvas = typeof OffscreenCanvas !== 'undefined' &&
            new OffscreenCanvas(1, 1).getContext('2d') &&
            typeof createImageBitmap === 'function';
    }
    return supportsOffscreenCanvas;
}

and i still got the errors after a fresh rebuild

[archmoj]

Until we publish plotly.js-map-dist packages similar to https://www.npmjs.com/package/plotly.js-mapbox-dist, to create a custom bundle including maplibre traces, one could run

npm run custom-bundle -- --unminified --traces choroplethmap,densitymap,scattermap

But strangely I don't get an error on this custom bundle! I started wondering this might be a webpack problem?!

[archmoj]

Oops. It actually did throw an error with the modified script for custom map bundle. So it could be something you may fix at maplibre level.

[archmoj]

Here is a faster command for testing:

npm run custom-bundle -- --unminified --traces scattermap && node ./node_modules/eslint/bin/eslint.js --no-ignore --no-eslintrc --no-inline-config --rule '{no-new-func: warn}' dist/plotly-custom.js

[birkskyum]

I've tried running this, and it turns out it's maplibre's dependencies that use various es6 (es2015) features, like glob which uses #private, and it makes it a bit challenging to get the es5 compilation running.

[birkskyum]

@archmoj , I'm don't think I can resolve this readily, since es6 is used in a lot of places at this point, because library authors take it for granted due to pages like this - it might be worth checking in the internal tools if there are plotly users without es6 support, and how many.

[archmoj]

Thanks @birkskyum for the note. I think the fix should be in plotly.js/webpack.config.js not on the maplibre. We already have es6 dependencies similar to maplibre.