Update emoji regex (#2254)

* chore(deps): Update emoji-regex

Also updates our code according to the new readme instructions of
emoji-regex:
https://github.com/mathiasbynens/emoji-regex

* Changeset

.changeset/lazy-planets-itch.md

@@ -0,0 +1,5 @@
+---
+'@react-pdf/layout': minor
+---
+
+Enable more modern emoji (Unicode 13+)

packages/layout/package.json

@@ -28,7 +28,7 @@
     "@react-pdf/types": "^2.3.1",
     "@react-pdf/yoga": "^4.1.2",
     "cross-fetch": "^3.1.5",
-    "emoji-regex": "^8.0.0",
+    "emoji-regex": "^10.2.1",
     "queue": "^6.0.1"
   },
   "devDependencies": {

packages/layout/src/text/emoji.js

@@ -47,9 +47,7 @@ export const fetchEmojis = (string, source) => {
 
   const promises = [];
 
-  let match;
-
-  while ((match = regex.exec(string))) {
+  Array.from(string.matchAll(regex)).forEach(match => {
     const emoji = match[0];
 
     if (!emojis[emoji] || emojis[emoji].loading) {
@@ -64,7 +62,7 @@ export const fetchEmojis = (string, source) => {
         }),
       );
     }
-  }
+  });
 
   return promises;
 };
@@ -75,10 +73,9 @@ export const embedEmojis = fragments => {
   for (let i = 0; i < fragments.length; i += 1) {
     const fragment = fragments[i];
 
-    let match;
     let lastIndex = 0;
 
-    while ((match = regex.exec(fragment.string))) {
+    Array.from(fragment.string.matchAll(regex)).forEach(match => {
       const { index } = match;
       const emoji = match[0];
       const emojiSize = fragment.attributes.fontSize;
@@ -108,7 +105,7 @@ export const embedEmojis = fragments => {
       }
 
       lastIndex = index + emoji.length;
-    }
+    });
 
     if (lastIndex < fragment.string.length) {
       result.push({

packages/renderer/tests/emoji.test.js

@@ -1,13 +1,13 @@
 import renderToImage from './renderComponent';
 import { Document, Page, Text, Font } from '..';
 
-Font.registerEmojiSource({
-  builder: code =>
-    `https://cdn.jsdelivr.net/gh/shuding/fluentui-emoji-unicode/assets/${code.toLowerCase()}_3d.png`,
-});
-
 describe('emoji', () => {
   test('should support builder function', async () => {
+    Font.registerEmojiSource({
+      builder: code =>
+        `https://cdn.jsdelivr.net/gh/shuding/fluentui-emoji-unicode/assets/${code.toLowerCase()}_3d.png`,
+    });
+
     const image = await renderToImage(
       <Document>
         <Page size={[100, 100]}>
@@ -18,4 +18,21 @@ describe('emoji', () => {
 
     expect(image).toMatchImageSnapshot();
   });
+
+  test('should support Unicode 13.0 emoji', async () => {
+    Font.registerEmojiSource({
+      format: 'png',
+      url: 'https://cdnjs.cloudflare.com/ajax/libs/twemoji/14.0.2/72x72/',
+    });
+
+    const image = await renderToImage(
+      <Document>
+        <Page size={[100, 100]}>
+          <Text style={{ fontSize: 80 }}>🦫</Text>
+        </Page>
+      </Document>,
+    );
+
+    expect(image).toMatchImageSnapshot();
+  });
 });

yarn.lock

@@ -4564,6 +4564,11 @@ electron-to-chromium@^1.4.284:
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.302.tgz#5770646ffe7051677b489226144aad9386d420f2"
   integrity sha512-Uk7C+7aPBryUR1Fwvk9VmipBcN9fVsqBO57jV2ZjTm+IZ6BMNqu7EDVEg2HxCNufk6QcWlFsBkhQyQroB2VWKw==
 
+emoji-regex@^10.2.1:
+  version "10.2.1"
+  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-10.2.1.tgz#a41c330d957191efd3d9dfe6e1e8e1e9ab048b3f"
+  integrity sha512-97g6QgOk8zlDRdgq1WxwgTMgEWGVAQvB5Fdpgc1MkNy56la5SKP9GsMXKDOdqwn90/41a8yPwIGk1Y6WVbeMQA==
+
 emoji-regex@^7.0.1:
   version "7.0.3"
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-7.0.3.tgz#933a04052860c85e83c122479c4748a8e4c72156"