refactor: convert layout package to TS

.changeset/short-cups-care.md

@@ -0,0 +1,10 @@
+---
+"@react-pdf/layout": minor
+"@react-pdf/stylesheet": patch
+"@react-pdf/textkit": patch
+"@react-pdf/image": patch
+"@react-pdf/font": patch
+"@react-pdf/fns": patch
+---
+
+refactor: convert layout package to TS

packages/fns/rollup.config.js

@@ -6,7 +6,7 @@ const config = [
   {
     input: 'src/index.ts',
     output: { format: 'es', dir: 'lib' },
-    plugins: [typescript(), del({ targets: 'lib' })],
+    plugins: [typescript()],
   },
   {
     input: './lib/types/index.d.ts',

packages/fns/src/asyncCompose.ts

@@ -1,25 +1,41 @@
 /* eslint-disable no-await-in-loop */
 
-import reverse from './reverse';
+type Fn = (arg: any, ...args: any[]) => Promise<any> | any;
 
+type FirstFnParameterType<T extends Fn[]> = T extends [
+  ...any,
+  (arg: infer A, ...args: any[]) => Promise<any> | any,
+]
+  ? A
+  : never;
+
+type LastFnReturnType<T extends Fn[]> = T extends [
+  (arg: any, ...args: any[]) => Promise<infer R> | infer R,
+  ...any,
+]
+  ? R
+  : never;
 /**
  * Performs right-to-left function composition with async functions support
  *
  * @param fns - Functions
  * @returns Composed function
  */
 const asyncCompose =
-  (...fns: any[]) =>
-  async (value: any, ...args: any[]) => {
+  <T extends Fn[]>(...fns: T) =>
+  async (
+    value: FirstFnParameterType<T>,
+    ...args: Parameters<T[0]> extends [any, ...infer Rest] ? Rest : []
+  ): Promise<LastFnReturnType<T>> => {
     let result = value;
-    const reversedFns = reverse(fns);
+    const reversedFns = fns.slice().reverse();
 
     for (let i = 0; i < reversedFns.length; i += 1) {
       const fn = reversedFns[i];
       result = await fn(result, ...args);
     }
 
-    return result;
+    return result as LastFnReturnType<T>;
   };
 
 export default asyncCompose;

packages/fns/src/capitalize.ts

@@ -1,7 +1,7 @@
 /**
  * Capitalize first letter of each word
  *
- * @param value = Any string
+ * @param value - Any string
  * @returns Capitalized string
  */
 const capitalize = (value?: string | null) => {

packages/fns/src/evolve.ts

@@ -1,5 +1,3 @@
-type Transformation = Record<string, (value: any) => any>;
-
 /**
  * Applies a set of transformations to an object and returns a new object with the transformed values.
  *
@@ -8,26 +6,25 @@ type Transformation = Record<string, (value: any) => any>;
  * @param object - The object to transform.
  * @returns The transformed object.
  */
-const evolve = (
-  transformations: Transformation,
-  object: Record<string, any>,
-): Record<string, any> => {
+function evolve<T extends Record<string, any>>(
+  transformations: Partial<{ [K in keyof T]: (value: T[K]) => T[K] }>,
+  object: T,
+): T {
   const result: Record<string, any> = {};
   const keys = Object.keys(object);
 
   for (let i = 0; i < keys.length; i += 1) {
     const key = keys[i];
     const transformation = transformations[key];
-    const type = typeof transformation;
 
-    if (type === 'function') {
+    if (typeof transformation === 'function') {
       result[key] = transformation(object[key]);
     } else {
       result[key] = object[key];
     }
   }
 
-  return result;
-};
+  return result as T;
+}
 
 export default evolve;

packages/fns/src/index.ts

@@ -16,3 +16,4 @@ export { default as repeat } from './repeat.js';
 export { default as reverse } from './reverse.js';
 export { default as upperFirst } from './upperFirst.js';
 export { default as without } from './without.js';
+export { default as parseFloat } from './parseFloat.js';

packages/fns/src/isNil.ts

@@ -5,7 +5,7 @@
  * @param value - The value to check
  * @returns True if the value is null or undefined, false otherwise
  */
-const isNil = <T = any>(value: T): boolean =>
+const isNil = (value: unknown): value is null | undefined =>
   value === null || value === undefined;
 
 export default isNil;

packages/fns/src/parseFloat.ts

@@ -0,0 +1,11 @@
+/**
+ * Parse a string or number to a float
+ *
+ * @param value - String or number
+ * @returns Parsed float
+ */
+const parseFloat = (value: string | number) => {
+  return typeof value === 'string' ? Number.parseFloat(value) : value;
+};
+
+export default parseFloat;

packages/fns/tests/parseFloat.test.ts

@@ -0,0 +1,29 @@
+import { describe, expect, test } from 'vitest';
+
+import parseFloat from '../src/parseFloat';
+
+describe('parseFloat', () => {
+  test('should return undefined for undefined', () => {
+    expect(parseFloat(undefined!)).toBe(undefined);
+  });
+
+  test('should return null for null', () => {
+    expect(parseFloat(null!)).toBe(null);
+  });
+
+  test('should parse integer', () => {
+    expect(parseFloat(10)).toBe(10);
+  });
+
+  test('should parse float', () => {
+    expect(parseFloat(10.1)).toBe(10.1);
+  });
+
+  test('should parse string integer', () => {
+    expect(parseFloat('10')).toBe(10);
+  });
+
+  test('should parse string float', () => {
+    expect(parseFloat('10.1')).toBe(10.1);
+  });
+});

packages/fns/tsconfig.json

@@ -10,7 +10,7 @@
     "moduleResolution": "Node",
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
-    "strict": false,
+    "strict": true,
     "skipLibCheck": true,
     "forceConsistentCasingInFileNames": true,
     "types": ["vitest/globals"],

packages/font/src/index.ts

@@ -9,7 +9,7 @@ import {
 } from './types';
 
 class FontStore {
-  fonts = {};
+  fonts: Record<string, font> = {};
 
   emojiSource: EmojiSource | null = null;
 
@@ -25,25 +25,17 @@ class FontStore {
     // Bulk loading
     if ('fonts' in data) {
       for (let i = 0; i < data.fonts.length; i += 1) {
-        this.fonts[family].register({ family, ...data.fonts[i] });
+        const { src, fontStyle, fontWeight, ...options } = data.fonts[i];
+        this.fonts[family].register({ src, fontStyle, fontWeight, ...options });
       }
     } else {
-      this.fonts[family].register(data);
+      const { src, fontStyle, fontWeight, ...options } = data;
+      this.fonts[family].register({ src, fontStyle, fontWeight, ...options });
     }
   };
 
   registerEmojiSource = (emojiSource: EmojiSource) => {
-    const url = 'url' in emojiSource ? emojiSource.url : undefined;
-    const format = 'format' in emojiSource ? emojiSource.format : undefined;
-    const builder = 'builder' in emojiSource ? emojiSource.builder : undefined;
-    const withVariationSelectors = emojiSource.withVariationSelectors || false;
-
-    this.emojiSource = {
-      url,
-      format: format || 'png',
-      builder,
-      withVariationSelectors,
-    };
+    this.emojiSource = emojiSource;
   };
 
   registerHyphenationCallback = (callback: HyphenationCallback) => {
@@ -89,7 +81,10 @@ class FontStore {
 
     for (let i = 0; i < keys.length; i += 1) {
       const key = keys[i];
-      this.fonts[key].data = null;
+      for (let j = 0; j < this.fonts[key].sources.length; j++) {
+        const fontSource = this.fonts[key].sources[j];
+        fontSource.data = null;
+      }
     }
   };
 

packages/image/src/index.ts

@@ -1,5 +1,5 @@
 import resolveImage from './resolve';
 
-export type { ImageSrc } from './types';
+export type { Image, ImageSrc } from './types';
 
 export default resolveImage;

packages/image/src/jpeg.ts

@@ -7,7 +7,7 @@ class JPEG implements Image {
   height: number;
   format: 'jpeg';
 
-  constructor(data) {
+  constructor(data: Buffer) {
     this.data = data;
     this.format = 'jpeg';
 

packages/image/src/types.ts

@@ -3,6 +3,7 @@ export interface Image {
   height: number;
   data: Buffer;
   format: 'jpeg' | 'png';
+  key?: string;
 }
 
 export type ImageFormat = 'jpg' | 'jpeg' | 'png';