diff --git a/.changeset/brave-onions-remain.md b/.changeset/brave-onions-remain.md new file mode 100644 index 000000000..72917f1d6 --- /dev/null +++ b/.changeset/brave-onions-remain.md @@ -0,0 +1,5 @@ +--- +'@react-pdf/font': patch +--- + +Add builtin fonts in fontstore diff --git a/packages/font/src/font.js b/packages/font/src/font.js index ff5dd14ae..cd36dfe0e 100644 --- a/packages/font/src/font.js +++ b/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(); } diff --git a/packages/font/src/index.js b/packages/font/src/index.js index 240d71941..965741e9f 100644 --- a/packages/font/src/index.js +++ b/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; diff --git a/packages/font/src/standard.js b/packages/font/src/standard.js deleted file mode 100644 index 29512d525..000000000 --- a/packages/font/src/standard.js +++ /dev/null @@ -1,14 +0,0 @@ -export default [ - 'Courier', - 'Courier-Bold', - 'Courier-Oblique', - 'Courier-BoldOblique', - 'Helvetica', - 'Helvetica-Bold', - 'Helvetica-Oblique', - 'Helvetica-BoldOblique', - 'Times-Roman', - 'Times-Bold', - 'Times-Italic', - 'Times-BoldItalic', -]; diff --git a/packages/font/tests/builtinFonts.test.js b/packages/font/tests/builtinFonts.test.js new file mode 100644 index 000000000..2793e432e --- /dev/null +++ b/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'); + }); +});