Fix #649: register builtin fonts into fontstore

.changeset/brave-onions-remain.md

@@ -0,0 +1,5 @@
+---
+'@react-pdf/font': patch
+---
+
+Add builtin fonts in fontstore

packages/font/src/font.js

@@ -49,7 +49,7 @@ class FontSource {
     this.fontStyle = fontStyle || 'normal';
     this.fontWeight = fontWeight || 400;
 
-    this.data = null;
+    this.data = typeof src === 'object' && src.builtin ? src.builtin : null;
     this.options = options;
     this.loadResultPromise = null;
   }
@@ -75,6 +75,10 @@ class FontSource {
   }
 
   async load() {
+    if (typeof this.src === 'object' && this.src.builtin) {
+      return Promise.resolve();
+    }
+
     if (this.loadResultPromise === null) {
       this.loadResultPromise = this._load();
     }

packages/font/src/index.js

@@ -1,8 +1,67 @@
 import font from './font';
-import standard from './standard';
+
+const CourierFont = font.create('Courier');
+CourierFont.register({
+  src: { builtin: 'Courier' },
+});
+CourierFont.register({
+  fontStyle: 'oblique',
+  src: { builtin: 'Courier-Oblique' },
+});
+CourierFont.register({
+  fontWeight: 700,
+  src: { builtin: 'Courier-Bold' },
+});
+CourierFont.register({
+  fontWeight: 700,
+  fontStyle: 'oblique',
+  src: { builtin: 'Courier-BoldOblique' },
+});
+
+const HelveticaFont = font.create('Helvetica');
+HelveticaFont.register({
+  src: { builtin: 'Helvetica' },
+});
+HelveticaFont.register({
+  fontStyle: 'oblique',
+  src: { builtin: 'Helvetica-Oblique' },
+});
+HelveticaFont.register({
+  fontWeight: 700,
+  src: { builtin: 'Helvetica-Bold' },
+});
+HelveticaFont.register({
+  fontWeight: 700,
+  fontStyle: 'oblique',
+  src: { builtin: 'Helvetica-BoldOblique' },
+});
+
+const TimesRomanFont = font.create('Times-Roman');
+TimesRomanFont.register({
+  src: { builtin: 'Times-Roman' },
+});
+TimesRomanFont.register({
+  fontStyle: 'italic',
+  src: { builtin: 'Times-Italic' },
+});
+TimesRomanFont.register({
+  fontWeight: 700,
+  src: { builtin: 'Times-Bold' },
+});
+TimesRomanFont.register({
+  fontWeight: 700,
+  fontStyle: 'italic',
+  src: { builtin: 'Times-BoldItalic' },
+});
+
+export const builtinFonts = {
+  Courier: CourierFont,
+  Helvetica: HelveticaFont,
+  'Times-Roman': TimesRomanFont,
+};
 
 function FontStore() {
-  let fonts = {};
+  let fonts = { ...builtinFonts };
 
   let emojiSource = null;
 
@@ -35,9 +94,6 @@ function FontStore() {
 
   this.getFont = descriptor => {
     const { fontFamily } = descriptor;
-    const isStandard = standard.includes(fontFamily);
-
-    if (isStandard) return null;
 
     if (!fonts[fontFamily]) {
       throw new Error(
@@ -49,11 +105,6 @@ function FontStore() {
   };
 
   this.load = async descriptor => {
-    const { fontFamily } = descriptor;
-    const isStandard = standard.includes(fontFamily);
-
-    if (isStandard) return;
-
     const f = this.getFont(descriptor);
 
     // We cache the font to avoid fetching it many times
@@ -70,7 +121,7 @@ function FontStore() {
   };
 
   this.clear = () => {
-    fonts = {};
+    fonts = { ...builtinFonts };
   };
 
   this.getRegisteredFonts = () => fonts;

packages/font/tests/builtinFonts.test.js

@@ -0,0 +1,156 @@
+import FontStore from '../src';
+
+describe('fontStore default fonts', () => {
+  test('should return builtin Courier', () => {
+    const fontStore = new FontStore();
+
+    expect(
+      fontStore.getFont({
+        fontFamily: 'Courier',
+        fontWeight: 400,
+        fontStyle: 'normal',
+      }).data,
+    ).toBe('Courier');
+    expect(
+      fontStore.getFont({
+        fontFamily: 'Courier',
+        fontWeight: 400,
+        fontStyle: 'oblique',
+      }).data,
+    ).toBe('Courier-Oblique');
+    expect(
+      fontStore.getFont({
+        fontFamily: 'Courier',
+        fontWeight: 700,
+        fontStyle: 'normal',
+      }).data,
+    ).toBe('Courier-Bold');
+    expect(
+      fontStore.getFont({
+        fontFamily: 'Courier',
+        fontWeight: 700,
+        fontStyle: 'oblique',
+      }).data,
+    ).toBe('Courier-BoldOblique');
+  });
+  test('should return builtin Helvetica', () => {
+    const fontStore = new FontStore();
+
+    expect(
+      fontStore.getFont({
+        fontFamily: 'Helvetica',
+        fontWeight: 400,
+        fontStyle: 'normal',
+      }).data,
+    ).toBe('Helvetica');
+    expect(
+      fontStore.getFont({
+        fontFamily: 'Helvetica',
+        fontWeight: 400,
+        fontStyle: 'oblique',
+      }).data,
+    ).toBe('Helvetica-Oblique');
+    expect(
+      fontStore.getFont({
+        fontFamily: 'Helvetica',
+        fontWeight: 700,
+        fontStyle: 'normal',
+      }).data,
+    ).toBe('Helvetica-Bold');
+    expect(
+      fontStore.getFont({
+        fontFamily: 'Helvetica',
+        fontWeight: 700,
+        fontStyle: 'oblique',
+      }).data,
+    ).toBe('Helvetica-BoldOblique');
+  });
+  test('should return builtin Times-Roman', () => {
+    const fontStore = new FontStore();
+
+    expect(
+      fontStore.getFont({
+        fontFamily: 'Times-Roman',
+        fontWeight: 400,
+        fontStyle: 'normal',
+      }).data,
+    ).toBe('Times-Roman');
+    expect(
+      fontStore.getFont({
+        fontFamily: 'Times-Roman',
+        fontWeight: 400,
+        fontStyle: 'italic',
+      }).data,
+    ).toBe('Times-Italic');
+    expect(
+      fontStore.getFont({
+        fontFamily: 'Times-Roman',
+        fontWeight: 700,
+        fontStyle: 'normal',
+      }).data,
+    ).toBe('Times-Bold');
+    expect(
+      fontStore.getFont({
+        fontFamily: 'Times-Roman',
+        fontWeight: 700,
+        fontStyle: 'italic',
+      }).data,
+    ).toBe('Times-BoldItalic');
+  });
+
+  test('should return builtin fonts after reset', () => {
+    const fontStore = new FontStore();
+
+    fontStore.reset();
+
+    expect(
+      fontStore.getFont({
+        fontFamily: 'Courier',
+        fontWeight: 400,
+        fontStyle: 'normal',
+      }).data,
+    ).toBe('Courier');
+    expect(
+      fontStore.getFont({
+        fontFamily: 'Helvetica',
+        fontWeight: 400,
+        fontStyle: 'normal',
+      }).data,
+    ).toBe('Helvetica');
+    expect(
+      fontStore.getFont({
+        fontFamily: 'Times-Roman',
+        fontWeight: 400,
+        fontStyle: 'normal',
+      }).data,
+    ).toBe('Times-Roman');
+  });
+
+  test('should return builtin fonts after clear', () => {
+    const fontStore = new FontStore();
+
+    fontStore.clear();
+
+    expect(
+      fontStore.getFont({
+        fontFamily: 'Courier',
+        fontWeight: 400,
+        fontStyle: 'normal',
+      }).data,
+    ).toBe('Courier');
+    expect(
+      fontStore.getFont({
+        fontFamily: 'Helvetica',
+        fontWeight: 400,
+        fontStyle: 'normal',
+      }).data,
+    ).toBe('Helvetica');
+    expect(
+      fontStore.getFont({
+        fontFamily: 'Times-Roman',
+        fontWeight: 400,
+        fontStyle: 'normal',
+      }).data,
+    ).toBe('Times-Roman');
+  });
+});