Avoid breakage of JavaScript Devtools due to inconsistent unicode behaviour

[ghost]

This plugin contains flag emojis which triggered https://bugzilla.mozilla.org/show_bug.cgi?id=1845093 for us. I've also reported this bug for VSCode: https://github.com/microsoft/vscode/issues/188677

I think more should be done to prevent these bugs from being triggered (potentially by encoding these unicode symbols differently in the source-code.. or warning users that there might be issues, including potential workarounds).

[ghost]

For webpack, this is our webpack config to work around the issue (using terser to ensure the JS bundle is purely ASCII):

// [...]
optimization: {
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          format: {
            // workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=1845093
            ascii_only: true,
          },
        },
      }),
    ],
  },
// [...]

[dmythro]

Thanks for submitting! As I've checked, doesn't really feel like this lib's issue to be honest :)

Did you try the recent version in this repo (there is a fresh build in dist)? Not released yet v3, but will be out there soon. Emoji is not loaded by default, there is a util function to generate it. You can load emoji flags if you need them from a separate file.

P.S. Everything is built from TypeScript with tsup, see packages/countries/tsup.config.ts.

[ghost]

As I've checked, doesn't really feel like this lib's issue to be honest :)

Definitely not the libs fault.

It just happens to use very inconsistent behaviour which should probably be avoided.

With 3 major tools (Firefox, Chrome and VSCode) behaving differently there's an obvious problem. These are also the only tools I looked at so far. I speculate these inconsistencies continue in Source-Map generators, other editors, browsers and so on.

Did you try the recent version in this repo (there is a fresh build in dist)?

We were using 2.5.4 actually!

I checked and https://github.com/annexare/Countries/blob/v2.6.1/dist/index.es5.min.js still contains emojis in the code (which also get rendered incorrectly in GitHub - at least in Firefox they overlap with code).

Not released yet v3, but will be out there soon. Emoji is not loaded by default, there is a util function to generate it.

I didn't try it yet, but this looks like it would work around the issue.

Some minimizer even explicitly turn escaped-unicode into actual unicode to save space which means you have to obfuscate these emojis in code currently (by hiding them behind a function call which turns some other encoding into the actual unicode at runtime).

Hence, the only good solution is to use a function to generate them from regional indicators which are ASCII encoded.

You can load emoji flags if you need them from a separate file.

How would that work? This might actually reintroduce the issue, because many bundlers will just concatenate all files, so if the file contains unicode, then it would break the column number / stacktraces again.

[dmythro]

@JannikGM here's the util to generate emoji flag: packages/countries/src/getEmojiFlag.ts. It is now exported from the lib along with couple other utils.

And here are recent CJS and MJS builds (see dist).

If you want a country code to emoji flag Record, there's additional data import you need to do, not loaded by default: dist/more/countries.emoji.min.js. Oh, just noticed there's no MJS file for that, but there is a dist/more/countries.emoji.min.json :)