refactor: convert textkit package to TS (#3077)

.changeset/stupid-dryers-do.md

@@ -0,0 +1,7 @@
+---
+"@react-pdf/fns": patch
+"@react-pdf/layout": patch
+"@react-pdf/textkit": patch
+---
+
+refactor: convert textkit package to TS

packages/fns/src/last.ts

@@ -4,8 +4,10 @@
  * @param value - The input value
  * @returns The last character of the string
  */
-const last = (value: string | any[]): any => {
+function last(value: string): string;
+function last<T>(value: T[]): T;
+function last(value: string | any[]): any {
   return value === '' ? '' : value[value.length - 1];
-};
+}
 
 export default last;

packages/layout/tests/text/layoutText.test.js

@@ -87,8 +87,8 @@ describe('text layoutText', () => {
     const node = createTextNode(text, {}, { hyphenationCallback });
     const lines = layoutText(node, 50, 100, null);
 
-    expect(lines[0].string).toEqual('really');
-    expect(lines[1].string).toEqual('long');
+    expect(lines[0].string).toEqual('really-');
+    expect(lines[1].string).toEqual('long-');
     expect(lines[2].string).toEqual('text');
     expect(hyphenationCallback).toHaveBeenCalledWith('reallylongtext');
   });

packages/textkit/package.json

@@ -5,6 +5,7 @@
   "description": "An advanced text layout framework",
   "type": "module",
   "main": "./lib/textkit.js",
+  "types": "./lib/index.d.ts",
   "repository": {
     "type": "git",
     "url": "https://github.com/diegomura/react-pdf.git",
@@ -23,7 +24,6 @@
     "lib"
   ],
   "dependencies": {
-    "@babel/runtime": "^7.20.13",
     "@react-pdf/fns": "3.1.0",
     "bidi-js": "^1.0.2",
     "hyphen": "^1.6.4",

packages/textkit/rollup.config.js

@@ -1,23 +1,15 @@
-import babel from '@rollup/plugin-babel';
 import localResolve from 'rollup-plugin-local-resolve';
+import typescript from '@rollup/plugin-typescript';
+import { dts } from 'rollup-plugin-dts';
+import del from 'rollup-plugin-delete';
 
 import pkg from './package.json' with { type: 'json' };
 
-const babelConfig = () => ({
-  babelrc: true,
-  exclude: 'node_modules/**',
-  babelHelpers: 'runtime',
-});
+const input = './src/index.ts';
 
-const input = './src/index.js';
+const getExternal = () => [...Object.keys(pkg.dependencies), /hyphen/];
 
-const getExternal = () => [
-  ...Object.keys(pkg.dependencies),
-  /@babel\/runtime/,
-  /hyphen/,
-];
-
-const getPlugins = () => [localResolve(), babel(babelConfig())];
+const getPlugins = () => [typescript(), localResolve()];
 
 const config = {
   input,
@@ -26,4 +18,10 @@ const config = {
   plugins: getPlugins(),
 };
 
-export default [config];
+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 [config, dtsConfig];

packages/textkit/src/attributedString/advanceWidth.ts

@@ -0,0 +1,15 @@
+import runAdvanceWidth from '../run/advanceWidth';
+import { AttributedString, Run } from '../types';
+
+/**
+ * Returns attributed string advancewidth
+ *
+ * @param attributedString - Attributed string
+ * @returns Advance width
+ */
+const advanceWidth = (attributedString: AttributedString) => {
+  const reducer = (acc: number, run: Run) => acc + runAdvanceWidth(run);
+  return attributedString.runs.reduce(reducer, 0);
+};
+
+export default advanceWidth;

packages/textkit/src/attributedString/advanceWidthBetween.js → packages/textkit/src/attributedString/advanceWidthBetween.ts

@@ -1,21 +1,22 @@
 import filterRuns from '../run/filter';
 import runAdvanceWidthBetween from '../run/advanceWidthBetween';
-
-/**
- * @typedef {import('../types.js').AttributedString} AttributedString
- */
+import { AttributedString } from '../types';
 
 /**
  * Advance width between start and end
  * Does not consider ligature splitting for the moment.
  * Check performance impact on supporting this
  *
- * @param {number} start offset
- * @param {number} end offset
- * @param {AttributedString} attributedString
- * @returns {number} advance width
+ * @param start - Start offset
+ * @param end - End offset
+ * @param attributedString
+ * @returns Advance width
  */
-const advanceWidthBetween = (start, end, attributedString) => {
+const advanceWidthBetween = (
+  start: number,
+  end: number,
+  attributedString: AttributedString,
+) => {
   const runs = filterRuns(start, end, attributedString.runs);
   return runs.reduce(
     (acc, run) => acc + runAdvanceWidthBetween(start, end, run),

packages/textkit/src/attributedString/append.js → packages/textkit/src/attributedString/append.ts

@@ -3,22 +3,21 @@ import { last } from '@react-pdf/fns';
 import emptyRun from '../run/empty';
 import appendToRun from '../run/append';
 import stringFromCodePoints from '../utils/stringFromCodePoints';
-
-/**
- * @typedef {import('../types.js').AttributedString} AttributedString
- * @typedef {import('../types.js').Glyph} Glyph
- */
+import { AttributedString, Glyph } from '../types';
 
 /**
  * Append glyph into last run of attributed string
  *
- * @param {Glyph} glyph glyph
- * @param {AttributedString} attributedString attributed string
- * @returns {AttributedString} attributed string with new glyph
+ * @param glyph - Glyph or code point
+ * @param attributedString - Attributed string
+ * @returns Attributed string with new glyph
  */
-const append = (glyph, attributedString) => {
-  const codePoints = glyph?.codePoints || [];
-  const codePointsString = stringFromCodePoints(codePoints);
+const append = (
+  glyph: Glyph | number | null,
+  attributedString: AttributedString,
+): AttributedString => {
+  const codePoints = typeof glyph === 'number' ? [glyph] : glyph?.codePoints;
+  const codePointsString = stringFromCodePoints(codePoints || []);
   const string = attributedString.string + codePointsString;
 
   const firstRuns = attributedString.runs.slice(0, -1);

packages/textkit/src/attributedString/ascent.ts

@@ -0,0 +1,15 @@
+import runAscent from '../run/ascent';
+import { AttributedString, Run } from '../types';
+
+/**
+ * Returns attributed string ascent
+ *
+ * @param attributedString - Attributed string
+ * @returns Ascent
+ */
+const ascent = (attributedString: AttributedString) => {
+  const reducer = (acc, run: Run) => Math.max(acc, runAscent(run));
+  return attributedString.runs.reduce(reducer, 0);
+};
+
+export default ascent;

packages/textkit/src/attributedString/descent.ts

@@ -0,0 +1,15 @@
+import runDescent from '../run/descent';
+import { AttributedString, Run } from '../types';
+
+/**
+ * Returns attributed string descent
+ *
+ * @param attributedString - Attributed string
+ * @returns Descent
+ */
+const descent = (attributedString: AttributedString) => {
+  const reducer = (acc: number, run: Run) => Math.min(acc, runDescent(run));
+  return attributedString.runs.reduce(reducer, 0);
+};
+
+export default descent;

packages/textkit/src/attributedString/dropLast.js → packages/textkit/src/attributedString/dropLast.ts

@@ -1,18 +1,15 @@
 import { adjust, dropLast as arrayDropLast } from '@react-pdf/fns';
 
 import runDropLast from '../run/dropLast';
-
-/**
- * @typedef {import('../types.js').AttributedString} AttributedString
- */
+import { AttributedString } from '../types';
 
 /**
  * Drop last glyph
  *
- * @param {AttributedString} attributedString attributed string
- * @returns {AttributedString} attributed string with new glyph
+ * @param attributedString - Attributed string
+ * @returns Attributed string with new glyph
  */
-const dropLast = (attributedString) => {
+const dropLast = (attributedString: AttributedString) => {
   const string = arrayDropLast(attributedString.string);
   const runs = adjust(-1, runDropLast, attributedString.runs);
 

packages/textkit/src/attributedString/empty.ts

@@ -0,0 +1,10 @@
+import { AttributedString } from '../types';
+
+/**
+ * Returns empty attributed string
+ *
+ * @returns Empty attributed string
+ */
+const empty = (): AttributedString => ({ string: '', runs: [] });
+
+export default empty;

packages/textkit/src/attributedString/end.ts

@@ -0,0 +1,15 @@
+import { last } from '@react-pdf/fns';
+import { AttributedString } from '../types';
+
+/**
+ * Get attributed string end value
+ *
+ * @param attributedString - Attributed string
+ * @returns End
+ */
+const end = (attributedString: AttributedString) => {
+  const { runs } = attributedString;
+  return runs.length === 0 ? 0 : last(runs).end;
+};
+
+export default end;

packages/textkit/src/attributedString/fromFragments.js → packages/textkit/src/attributedString/fromFragments.ts

@@ -1,15 +1,12 @@
-/**
- * @typedef {import('../types.js').AttributedString} AttributedString
- * @typedef {import('../types.js').Fragment} Fragment
- */
+import { AttributedString, Fragment } from '../types';
 
 /**
  * Create attributed string from text fragments
  *
- * @param {Fragment[]} fragments fragments
- * @returns {AttributedString} attributed string
+ * @param fragments - Fragments
+ * @returns Attributed string
  */
-const fromFragments = (fragments) => {
+const fromFragments = (fragments: Fragment[]): AttributedString => {
   let offset = 0;
   let string = '';
   const runs = [];