refactor: convert font package to TS

Author: diegomura

packages/font/babel.config.js

@@ -0,0 +1,12 @@
+import type { Font, FontCollection } from 'fontkit';
+
+declare module 'fontkit' {
+  export function create(
+    buffer: Uint8Array | Buffer,
+    postscriptName?: string,
+  ): Font | FontCollection;
+}
+
+declare global {
+  const BROWSER: boolean;
+}

packages/font/globals.d.ts

@@ -12,6 +12,7 @@
   },
   "type": "module",
   "main": "./lib/index.js",
+  "types": "./lib/index.d.ts",
   "browser": {
     "./lib/index.js": "./lib/index.browser.js"
   },
@@ -21,12 +22,14 @@
     "watch": "rimraf ./lib && rollup -c -w"
   },
   "dependencies": {
-    "@babel/runtime": "^7.20.13",
     "@react-pdf/types": "^2.7.1",
     "fontkit": "^2.0.2",
     "is-url": "^1.2.4"
   },
   "files": [
     "lib"
-  ]
+  ],
+  "devDependencies": {
+    "@types/fontkit": "^2.0.7"
+  }
 }

packages/font/package.json

@@ -1,18 +1,17 @@
-import babel from '@rollup/plugin-babel';
+import { dts } from 'rollup-plugin-dts';
+import del from 'rollup-plugin-delete';
+import typescript from '@rollup/plugin-typescript';
+
 import replace from '@rollup/plugin-replace';
 
 import pkg from './package.json' with { type: 'json' };
 
-const babelConfig = () => ({
-  babelrc: true,
-  exclude: 'node_modules/**',
-  babelHelpers: 'runtime',
-});
+const input = './src/index.ts';
 
-const external = [/@babel\/runtime/, ...Object.keys(pkg.dependencies)];
+const external = Object.keys(pkg.dependencies);
 
 const getPlugins = ({ browser }) => [
-  babel(babelConfig()),
+  typescript(),
   replace({
     preventAssignment: true,
     values: {
@@ -22,17 +21,23 @@ const getPlugins = ({ browser }) => [
 ];
 
 const serverConfig = {
-  input: './src/index.js',
+  input,
   output: { format: 'es', file: 'lib/index.js' },
   external,
   plugins: getPlugins({ browser: false }),
 };
 
 const browserConfig = {
-  input: './src/index.js',
+  input,
   output: { format: 'es', file: 'lib/index.browser.js' },
   external,
   plugins: getPlugins({ browser: true }),
 };
 
-export default [serverConfig, browserConfig];
+const dtsConfig = {
+  input: './lib/types/index.d.ts',
+  output: [{ file: 'lib/index.d.ts', format: 'es' }],
+  plugins: [dts(), del({ targets: 'lib/types', hook: 'buildEnd' })],
+};
+
+export default [serverConfig, browserConfig, dtsConfig];

packages/font/rollup.config.js

@@ -2,6 +2,12 @@
 
 import isUrl from 'is-url';
 import * as fontkit from 'fontkit';
+import {
+  FontDescriptor,
+  FontSourceOptions,
+  FontStyle,
+  FontWeight,
+} from './types';
 
 const FONT_WEIGHTS = {
   thin: 100,
@@ -20,29 +26,44 @@ const FONT_WEIGHTS = {
   black: 900,
 };
 
-const fetchFont = async (src, options) => {
+const fetchFont = async (src: string, options) => {
   const response = await fetch(src, options);
   const data = await response.arrayBuffer();
 
   return new Uint8Array(data);
 };
 
-const isDataUrl = (dataUrl) => {
+const isDataUrl = (dataUrl: string) => {
   const header = dataUrl.split(',')[0];
   const hasDataPrefix = header.substring(0, 5) === 'data:';
   const hasBase64Prefix = header.split(';')[1] === 'base64';
 
   return hasDataPrefix && hasBase64Prefix;
 };
 
-const resolveFontWeight = (value) => {
+const resolveFontWeight = (value: FontWeight) => {
   return typeof value === 'string' ? FONT_WEIGHTS[value] : value;
 };
 
-const sortByFontWeight = (a, b) => a.fontWeight - b.fontWeight;
+const sortByFontWeight = (a: FontSource, b: FontSource) =>
+  a.fontWeight - b.fontWeight;
 
 class FontSource {
-  constructor(src, fontFamily, fontStyle, fontWeight, options) {
+  src: string;
+  fontFamily: string;
+  fontStyle: FontStyle;
+  fontWeight: number;
+  data: fontkit.Font | fontkit.FontCollection | null;
+  options: FontSourceOptions;
+  loadResultPromise: Promise<void> | null;
+
+  constructor(
+    src: string,
+    fontFamily: string,
+    fontStyle: FontStyle,
+    fontWeight: number,
+    options: FontSourceOptions,
+  ) {
     this.src = src;
     this.fontFamily = fontFamily;
     this.fontStyle = fontStyle || 'normal';
@@ -53,7 +74,7 @@ class FontSource {
     this.loadResultPromise = null;
   }
 
-  async _load() {
+  async _load(): Promise<void> {
     const { postscriptName } = this.options;
 
     if (isDataUrl(this.src)) {
@@ -82,11 +103,14 @@ class FontSource {
 }
 
 class Font {
-  static create(family) {
+  family: string;
+  sources: FontSource[];
+
+  static create(family: string) {
     return new Font(family);
   }
 
-  constructor(family) {
+  constructor(family: string) {
     this.family = family;
     this.sources = [];
   }
@@ -99,39 +123,46 @@ class Font {
     );
   }
 
-  resolve(descriptor) {
+  resolve(descriptor: FontDescriptor) {
     const { fontWeight = 400, fontStyle = 'normal' } = descriptor;
     const styleSources = this.sources.filter((s) => s.fontStyle === fontStyle);
 
-    // Weight resolution. https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight#Fallback_weights
     const exactFit = styleSources.find((s) => s.fontWeight === fontWeight);
 
     if (exactFit) return exactFit;
 
-    let res;
+    // Weight resolution. https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight#Fallback_weights
+
+    let res: FontSource;
+
+    const numericFontWeight = resolveFontWeight(fontWeight);
+
+    if (numericFontWeight >= 400 && numericFontWeight <= 500) {
+      const leftOffset = styleSources.filter(
+        (s) => s.fontWeight <= numericFontWeight,
+      );
 
-    if (fontWeight >= 400 && fontWeight <= 500) {
-      const leftOffset = styleSources.filter((s) => s.fontWeight <= fontWeight);
       const rightOffset = styleSources.filter((s) => s.fontWeight > 500);
+
       const fit = styleSources.filter(
-        (s) => s.fontWeight >= fontWeight && s.fontWeight < 500,
+        (s) => s.fontWeight >= numericFontWeight && s.fontWeight < 500,
       );
 
       res = fit[0] || leftOffset[leftOffset.length - 1] || rightOffset[0];
     }
 
     const lt = styleSources
-      .filter((s) => s.fontWeight < fontWeight)
+      .filter((s) => s.fontWeight < numericFontWeight)
       .sort(sortByFontWeight);
     const gt = styleSources
-      .filter((s) => s.fontWeight > fontWeight)
+      .filter((s) => s.fontWeight > numericFontWeight)
       .sort(sortByFontWeight);
 
-    if (fontWeight < 400) {
+    if (numericFontWeight < 400) {
       res = lt[lt.length - 1] || gt[0];
     }
 
-    if (fontWeight > 500) {
+    if (numericFontWeight > 500) {
       res = gt[0] || lt[lt.length - 1];
     }