koala-interactive / is-emoji-supported Goto Github PK

Getting warning from source-map-loader:

WARNING in ./node_modules/emoji-mart/dist/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'xxx/node_modules/emoji-mart/dist/node_modules/is-emoji-supported/src/is-emoji-supported.ts' file: Error: ENOENT: no such file or directory, open 'xxx/node_modules/emoji-mart/dist/node_modules/is-emoji-supported/src/is-emoji-supported.ts'

webpack compiled with 1 warning

Hi there,

First, thanks for making this, it's been a godsend.

Brave apparently has "anti fingerprinting" code in their getImageData() method, which makes is-emoji-supported return incorrect results.

To repro, compare this codesandbox in Chrome vs Brave: https://codesandbox.io/s/serene-joliot-hjbef

It's obviously an issue with Brave and not your code, but it still means that code that uses this library is effectively broken for Brave users. I'd be happy to provide a PR that addresses it, but I figured it might be worth discussing approaches first.

1. Simply don't support Brave

A valid choice, given that it's Brave who's not respecting the spec. That said, browsers not respecting specs is common, and a library that exists to test browser support for something might be expected to be able to deal with that.

2. Allow slight color differences

Brave returns colors from getImageData that are very close to the actual colors. Eg when testing, I found that it returned an (0,0,0,16) rgba pixel value as eg (1,0,1,16). We could edit the code to allow small color variations, eg let each channel (r, g, b, a) vary by 1 or 2 points.

3. Allow slight color differences on Brave only

Wrap the loose approach from point 2 in a if(navigator.brave.isBrave)

4. Compare more than one pixel

Brave does not obfuscate every byte, which is why the codesandbox link shows some emojis as supported and some as not. Given that we're checking that the font color is fully ignored when emojis are rendered, it might be good enough when some pixels are equal. Eg compare up to 10 pixels and only fail when none of them match.

I think that personally I lean towards option 3 which is very explicitly Brave-only. This makes maintenance easy because it's a clear hack for a specific browser's specific bug. I'll be happy to provide a PR.

Curious about your thoughts!