JavaScript browser compatibility checker which checks against »can I use« data

[mischah]

There are already tools for checking CSS compatibility like the following:

• stylelint plugin
• doiuse – Standalone module

But I could b’t find any for JavaScript.
It would be awesome to have a node module (with a CLI) for that.

Related:
caniuse API

[sindresorhus]

The only thing I could find is https://github.com/amilajack/eslint-plugin-compat

[mischah]

Thanks. Missed that. Looks pretty neat. But I would prefer to have something as a standalone tool.

Is this still a valid module request?

[sindresorhus]

Is this still a valid module request?

Yes, I was just sharing prior art.

[mischah]

Tried eslint-plugin-compat extensively.
It simply doesn’t work as expected. ES6 methods like Object.assign() and String.prototype.padEnd() didn’t cause errors. Same for arrow functions. Plus, when something causes an error, the error remains when using a proper polyfill.

[CodeByAlex]

@mischah Did you find anything since your last post?

[mischah]

@CodeByAlex Nope.

[robatwilliams]

A few colleagues and I came up with some things that such a tool could do (before we found this issue). It needs to be borne in mind that APIs can be polyfilled whereas language features cannot.

Will it work

In which browsers/versions will this work?

Will this work in these browsers/versions?
=> https://github.com/amilajack/eslint-plugin-compat (bearing in mind #103 (comment))

Making it work

How could I change this to make it work in these browsers/versions?

Change this to make it work in these browsers/versions.

How might I change this to make it work in more browsers/versions?

Polyfilling

Give me a JavaScript expression that determines if I need to load any polyfills to make this work in the current browser (for use in browserSupportsAllFeatures() as described in Loading Polyfills Only When Needed.

Which polyfills do I need (worst case scenario) to make this work in these browsers/versions?

Create a polyfills file (worst case scenario) to make this work in these browsers/versions.

Give me only the polyfills needed to make this work in the current browser.
=> https://polyfill.io/ (use the generated expression from above to avoid unnecessary round-trip in latest browsers)

Tools and resources for implementation

Which APIs does this use?
=> https://github.com/Financial-Times/js-features-analyser

Which language features does this use?
=> https://github.com/babel/babel-eslint

Is this API or language feature supported in this browser?
=> https://github.com/kangax/compat-table/ (https://github.com/kangax/compat-table/blob/gh-pages/data-esnext.js)
=> https://github.com/Fyrd/caniuse

[robatwilliams]

I did some experimentation to investigate the feasibility of this: https://github.com/robatwilliams/workie

I posted some notes there - in conclusion, it would be possible, but there are some limitations and I think it's quite a niche use case.

[robatwilliams]

Focusing on the language feature aspect, I created an ESLint plugin and companion CLI tool which use browserslist and the MDN browser compatibility data.

https://github.com/robatwilliams/es-compat

I've just released a beta version which covers ES2018 and 2019. It shouldn't be much more work to add the other ES20xx versions for a MVP. Let me know if you have any feedback.