Remove is-emoji-supported dep

It has several problems: first of all, it initializes DOM stuff at load time, which means you can't choose to postpone loading the polyfill into you're sure you're not in some isolated environment that disallows creating elements. Secondly, it doesn't set willReadFrequently which recent chromiums started generating warnings about (even though in practice this doesnt matter, given how few pixels we read). Replaced it all by an implementation taken from TalkJS core, which in turn is a mish-mash of ideas from if-emoji and emoji-picker-element. Notably, it renders into a 1-pixel canvas which is just genius.
talkjs · Dec 18, 2023 · 516b0cb · 516b0cb
1 parent 0327203
commit 516b0cb
Show file tree

Hide file tree

Showing 6 changed files with 676 additions and 112 deletions.
diff --git a/README.md b/README.md
@@ -4,7 +4,9 @@
 
 Recent Windows versions (finally) support emojis natively, but they still do not support pretty country flags. By extension, all Chromium-based browsers can't display country flag emojis natively.
 
-In short, if "🇨🇭" looks like "ᴄʜ" and not like a flag, then this polyfill is for you.
+In short, if "🇨🇭" looks like "ᴄʜ" and not like a flag, then this polyfill is for you. 
+
+It's 0.7kB gzipped, with zero dependencies. The font with country flags is 77kB and only downloaded when needed.
 
 ---
 
@@ -96,7 +98,7 @@ The key building block of this polyfill is a font, "Twemoji Country Flags", a su
 
 This is important, because Twemoji Mozilla is 1.5MB, which is a pretty huge hit on your app perfomance. The subset is only 78kb, which is much better.
 
-It then injects some CSS to load this font as a webfont, but only if the browser supports regular emojis and not country flags. It uses the excellent [is-emoji-supported](https://github.com/koala-interactive/is-emoji-supported) for all the heavy lifting.
+It then injects some CSS to load this font as a webfont, but only if the browser supports regular emojis and not country flags. 
 
 As far as I can tell, all browsers that have this problem support WOFF2 fonts, so I made no effort to do the usual multi-font-format `@font-face` syntax (with eg ttf and woff fonts also).
 

diff --git a/examples/local/index.html b/examples/local/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<title>country-flag-emoji-polyfill</title>
+<script type="module" defer>
+import { polyfillCountryFlagEmojis } from "../../dist/index.module.js";
+polyfillCountryFlagEmojis();
+</script>
+<style>
+* {
+    font-family: "Twemoji Country Flags", serif;
+}
+</style>
+
+<h1>country-flag-emoji-polyfill local-dev test page</h1>
+<p>
+Run a dev server on the repository root, then open this page in your browser at <code>http://localhost:PORT/examples/local</code>
+
+<p>
+If it works, this is a flag on all browsers, including Chrome-based browsers on Windows:
+
+<p style="font-size: 4em">
+🇫🇮
+
+</html>