feat: function as emoji source (#2252)

* implement function as emoji source to build more complex urls

* change set

.changeset/moody-suns-smash.md

@@ -0,0 +1,7 @@
+---
+'@react-pdf/layout': patch
+'@react-pdf/types': patch
+'@react-pdf/font': patch
+---
+
+implement function as emoji source to build more complex urls

packages/font/src/index.js

@@ -25,8 +25,8 @@ function FontStore() {
     }
   };
 
-  this.registerEmojiSource = ({ url, format = 'png' }) => {
-    emojiSource = { url, format };
+  this.registerEmojiSource = ({ url, format = 'png', builder }) => {
+    emojiSource = { url, format, builder };
   };
 
   this.registerHyphenationCallback = callback => {

packages/layout/src/text/emoji.js

@@ -34,12 +34,16 @@ const getCodePoints = string =>
     .join('-');
 
 const buildEmojiUrl = (emoji, source) => {
-  const { url, format } = source;
+  const { url, format, builder } = source;
+  if (typeof builder === 'function') {
+    return builder(getCodePoints(emoji));
+  }
+
   return `${url}${getCodePoints(emoji)}.${format}`;
 };
 
 export const fetchEmojis = (string, source) => {
-  if (!source || !source.url) return [];
+  if (!source || (!source.url && !source.builder)) return [];
 
   const promises = [];
 

packages/renderer/tests/emoji.test.js

@@ -0,0 +1,21 @@
+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 () => {
+    const image = await renderToImage(
+      <Document>
+        <Page size={[100, 100]}>
+          <Text style={{ fontSize: 80 }}>💩</Text>
+        </Page>
+      </Document>,
+    );
+
+    expect(image).toMatchImageSnapshot();
+  });
+});

packages/types/font.d.ts

@@ -46,11 +46,17 @@ interface RegisteredFont {
   [key: string]: any;
 }
 
-interface EmojiSource {
+interface EmojiSourceUrl {
   url: string;
-  format: string;
+  format?: string;
 }
 
+interface EmojiSourceBuilder {
+  builder: (code: string) => string;
+}
+
+type EmojiSource = EmojiSourceUrl | EmojiSourceBuilder;
+
 interface SingleLoad {
   family: string;
   src: string;