@stats-organization/github-readme-stats-core 2.1.3 → 2.1.5

package/src/common/{ops.js → ops.ts}

@@ -1,5 +1,3 @@
-// @ts-check
-
 import toEmoji from "emoji-name-map";
 
 import { OWNER_AFFILIATIONS } from "./constants.js";
@@ -8,10 +6,10 @@ import { CustomError } from "./error.js";
 /**
  * Returns boolean if value is either "true" or "false" else the value as it is.
  *
- * @param {string | boolean} value The value to parse.
- * @returns {boolean | undefined } The parsed value.
+ * @param value The value to parse.
+ * @returns The parsed value.
  */
-const parseBoolean = (value) => {
+const parseBoolean = (value: string | boolean): boolean | undefined => {
   if (typeof value === "boolean") {
     return value;
   }
@@ -29,10 +27,10 @@ const parseBoolean = (value) => {
 /**
  * Parse string to array of strings.
  *
- * @param {string} str The string to parse.
- * @returns {string[]} The array of strings.
+ * @param str The string to parse.
+ * @returns The array of strings.
  */
-const parseArray = (str) => {
+const parseArray = (str: string): Array<string> => {
   if (!str) {
     return [];
   }
@@ -42,47 +40,44 @@ const parseArray = (str) => {
 /**
  * Clamp the given number between the given range.
  *
- * @param {number} number The number to clamp.
- * @param {number} min The minimum value.
- * @param {number} max The maximum value.
- * @returns {number} The clamped number.
+ * @param number The number to clamp.
+ * @param min The minimum value.
+ * @param max The maximum value.
+ * @returns The clamped number.
  */
-const clampValue = (number, min, max) => {
-  // @ts-ignore
-  if (Number.isNaN(parseInt(number, 10))) {
+const clampValue = (
+  number: string | number,
+  min: number,
+  max: number,
+): number => {
+  if (Number.isNaN(parseInt(String(number), 10))) {
     return min;
   }
-  return Math.max(min, Math.min(number, max));
+  return Math.max(min, Math.min(Number(number), max));
 };
 
 /**
  * Lowercase and trim string.
  *
- * @param {string} name String to lowercase and trim.
- * @returns {string} Lowercased and trimmed string.
+ * @param name String to lowercase and trim.
+ * @returns Lowercased and trimmed string.
  */
-const lowercaseTrim = (name) => name.toLowerCase().trim();
+const lowercaseTrim = (name: string): string => name.toLowerCase().trim();
 
 /**
  * Split array of languages in two columns.
  *
  * @template T Language object.
- * @param {Array<T>} arr Array of languages.
- * @param {number} perChunk Number of languages per column.
- * @returns {Array<T>} Array of languages split in two columns.
+ * @param arr Array of languages.
+ * @param perChunk Number of languages per column.
+ * @returns Array of languages split in two columns.
  */
-const chunkArray = (arr, perChunk) => {
-  return arr.reduce((resultArray, item, index) => {
+const chunkArray = <T>(arr: Array<T>, perChunk: number): Array<Array<T>> => {
+  return arr.reduce<Array<Array<T>>>((resultArray, item, index) => {
     const chunkIndex = Math.floor(index / perChunk);
-
-    if (!resultArray[chunkIndex]) {
-      // @ts-ignore
-      resultArray[chunkIndex] = []; // start a new chunk
-    }
-
-    // @ts-ignore
-    resultArray[chunkIndex].push(item);
-
+    const chunk = resultArray[chunkIndex] ?? [];
+    chunk.push(item);
+    resultArray[chunkIndex] = chunk;
     return resultArray;
   }, []);
 };
@@ -90,10 +85,10 @@ const chunkArray = (arr, perChunk) => {
 /**
  * Parse emoji from string.
  *
- * @param {string} str String to parse emoji from.
- * @returns {string} String with emoji parsed.
+ * @param str String to parse emoji from.
+ * @returns String with emoji parsed.
  */
-const parseEmojis = (str) => {
+const parseEmojis = (str: string): string => {
   if (!str) {
     throw new Error("[parseEmoji]: str argument not provided");
   }
@@ -105,11 +100,11 @@ const parseEmojis = (str) => {
 /**
  * Get diff in minutes between two dates.
  *
- * @param {Date} d1 First date.
- * @param {Date} d2 Second date.
- * @returns {number} Number of minutes between the two dates.
+ * @param d1 First date.
+ * @param d2 Second date.
+ * @returns Number of minutes between the two dates.
  */
-const dateDiff = (d1, d2) => {
+const dateDiff = (d1: Date, d2: Date): number => {
   const date1 = new Date(d1);
   const date2 = new Date(d2);
   const diff = date1.getTime() - date2.getTime();
@@ -119,40 +114,41 @@ const dateDiff = (d1, d2) => {
 /**
  * Parse owner affiliations.
  *
- * @param {string[]} affiliations input affiliations to be parsed.
- * @returns {string[]} Parsed affiliations.
+ * @param affiliations input affiliations to be parsed.
+ * @returns Parsed affiliations.
  *
  * @throws {CustomError} If affiliations contains invalid values.
  */
-const parseOwnerAffiliations = (affiliations) => {
+const parseOwnerAffiliations = (affiliations: Array<string>): Array<string> => {
   // Set default value for ownerAffiliations.
   // NOTE: Done here since parseArray() will always return an empty array even nothing
   //was specified.
-  affiliations =
-    affiliations && affiliations.length > 0
+  const normalized =
+    affiliations.length > 0
       ? affiliations.map((affiliation) => affiliation.toUpperCase())
       : ["OWNER"];
 
   // Check if ownerAffiliations contains valid values.
   if (
-    affiliations.some(
-      (affiliation) => !OWNER_AFFILIATIONS.includes(affiliation),
-    )
+    normalized.some((affiliation) => !OWNER_AFFILIATIONS.includes(affiliation))
   ) {
     throw new CustomError(
       "Invalid query parameter",
       CustomError.INVALID_AFFILIATION,
     );
   }
-  return affiliations;
+  return normalized;
 };
 
-const buildSearchFilter = (repos = [], owners = []) => {
-  let repoFilter =
+const buildSearchFilter = (
+  repos: Array<string> | string = [],
+  owners: Array<string> | string = [],
+): string => {
+  const repoFilter =
     Array.isArray(repos) && repos.length > 0
       ? repos.map((r) => `repo:${r} `).join("")
       : "";
-  let orgFilter =
+  const orgFilter =
     Array.isArray(owners) && owners.length > 0
       ? owners.map((o) => `owner:${o} `).join("")
       : "";

package/src/common/{render.js → render.ts}

@@ -1,6 +1,4 @@
-// @ts-check
-
-import { getCardColors } from "./color.js";
+import { getCardColors, isPrefixedHexColor } from "./color.js";
 import { SECONDARY_ERROR_MESSAGES, TRY_AGAIN_LATER } from "./error.js";
 import { encodeHTML } from "./html.js";
 import { clampValue } from "./ops.js";
@@ -9,14 +7,30 @@ import { clampValue } from "./ops.js";
  * Auto layout utility, allows us to layout things vertically or horizontally with
  * proper gaping.
  *
- * @param {object} props Function properties.
- * @param {string[]} props.items Array of items to layout.
- * @param {number} props.gap Gap between items.
- * @param {"column" | "row"=} props.direction Direction to layout items.
- * @param {number[]=} props.sizes Array of sizes for each item.
- * @returns {string[]} Array of items with proper layout.
+ * The caller must ensure that the passed `items` are properly sanitized!
+ *
+ * @param props Function properties.
+ * @param props.items Array of sanitized items to layout.
+ * @param props.gap Gap between items.
+ * @param props.direction Direction to layout items.
+ * @param props.sizes Array of sizes for each item.
+ * @returns Array of items with proper layout.
  */
-const flexLayout = ({ items, gap, direction, sizes = [] }) => {
+const flexLayout = ({
+  items,
+  gap,
+  direction,
+  sizes = [],
+}: {
+  items: Array<string>;
+  gap: number;
+  direction?: "column" | "row";
+  sizes?: Array<number>;
+}): Array<string> => {
+  if (sizes.some((size) => !Number.isFinite(size))) {
+    throw new Error("flexLayout: `sizes` must contain only numbers");
+  }
+
   let lastSize = 0;
   // filter() for filtering out empty strings
   return items.filter(Boolean).map((item, i) => {
@@ -33,15 +47,19 @@ const flexLayout = ({ items, gap, direction, sizes = [] }) => {
 /**
  * Creates a node to display the primary programming language of the repository/gist.
  *
- * @param {string} langName Language name.
- * @param {string} langColor Language color.
- * @returns {string} Language display SVG object.
+ * @param langName Language name.
+ * @param langColor Language color.
+ * @returns Language display SVG object.
  */
-const createLanguageNode = (langName, langColor) => {
+const createLanguageNode = (langName: string, langColor: string): string => {
+  if (!isPrefixedHexColor(langColor)) {
+    throw new Error(`Invalid language color: "${langColor}"`);
+  }
+
   return `
     <g data-testid="primary-lang">
       <circle data-testid="lang-color" cx="0" cy="-5" r="6" fill="${langColor}" />
-      <text data-testid="lang-name" class="gray" x="15">${langName}</text>
+      <text data-testid="lang-name" class="gray" x="15">${encodeHTML(langName)}</text>
     </g>
     `;
 };
@@ -49,15 +67,15 @@ const createLanguageNode = (langName, langColor) => {
 /**
  * Create a node to indicate progress in percentage along a horizontal line.
  *
- * @param {Object} params Object that contains the createProgressNode parameters.
- * @param {number} params.x X-axis position.
- * @param {number} params.y Y-axis position.
- * @param {number} params.width Width of progress bar.
- * @param {string} params.color Progress color.
- * @param {number} params.progress Progress value.
- * @param {string} params.progressBarBackgroundColor Progress bar bg color.
- * @param {number} params.delay Delay before animation starts.
- * @returns {string} Progress node.
+ * @param params Object that contains the createProgressNode parameters.
+ * @param params.x X-axis position.
+ * @param params.y Y-axis position.
+ * @param params.width Width of progress bar.
+ * @param params.color Progress color.
+ * @param params.progress Progress value.
+ * @param params.progressBarBackgroundColor Progress bar bg color.
+ * @param params.delay Delay before animation starts.
+ * @returns Progress node.
  */
 const createProgressNode = ({
   x,
@@ -67,7 +85,36 @@ const createProgressNode = ({
   progress,
   progressBarBackgroundColor,
   delay,
-}) => {
+}: {
+  x: number;
+  y: number;
+  width: number;
+  color: string;
+  progress: number;
+  progressBarBackgroundColor: string;
+  delay: number;
+}): string => {
+  if (!isPrefixedHexColor(color)) {
+    throw new Error(`Invalid progress color: "${color}"`);
+  }
+  if (!isPrefixedHexColor(progressBarBackgroundColor)) {
+    throw new Error(
+      `Invalid progress bar background color: "${progressBarBackgroundColor}"`,
+    );
+  }
+  if (!Number.isFinite(width)) {
+    throw new Error(`Invalid width: "${width}"`);
+  }
+  if (!Number.isFinite(x)) {
+    throw new Error(`Invalid x: "${x}"`);
+  }
+  if (!Number.isFinite(y)) {
+    throw new Error(`Invalid y: "${y}"`);
+  }
+  if (!Number.isFinite(delay)) {
+    throw new Error(`Invalid delay: "${delay}"`);
+  }
+
   const progressPercentage = clampValue(progress, 2, 100);
 
   return `
@@ -91,16 +138,16 @@ const createProgressNode = ({
  * native, font-aware wrapping. Content overflowing `lineCount` lines is
  * clipped (with an ellipsis on the last visible line) by CSS line-clamp.
  *
- * @param {object} props Function properties.
- * @param {string} props.text Text to render (will be HTML-encoded).
- * @param {number} props.x X position of the foreignObject.
- * @param {number} props.y Y position of the foreignObject.
- * @param {number} props.width Width of the wrap box.
- * @param {number} props.height Height of the wrap box.
- * @param {number} props.lineCount Maximum number of lines to display.
- * @param {string} props.className CSS class applied to the inner element.
- * @param {string=} props.testId Optional test id for the inner element.
- * @returns {string} foreignObject SVG node.
+ * @param props Function properties.
+ * @param props.text Text to render (will be HTML-encoded).
+ * @param props.x X position of the foreignObject.
+ * @param props.y Y position of the foreignObject.
+ * @param props.width Width of the wrap box.
+ * @param props.height Height of the wrap box.
+ * @param props.lineCount Maximum number of lines to display.
+ * @param props.className CSS class applied to the inner element.
+ * @param props.testId Optional test id for the inner element.
+ * @returns foreignObject SVG node.
  */
 const wrappedTextNode = ({
   text,
@@ -111,11 +158,36 @@ const wrappedTextNode = ({
   lineCount,
   className,
   testId,
-}) => {
-  const testIdAttr = testId ? ` data-testid="${testId}"` : "";
+}: {
+  text: string;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  lineCount: number;
+  className: string;
+  testId?: string;
+}): string => {
+  if (!Number.isFinite(x)) {
+    throw new Error(`Invalid x: "${x}"`);
+  }
+  if (!Number.isFinite(y)) {
+    throw new Error(`Invalid y: "${y}"`);
+  }
+  if (!Number.isFinite(width)) {
+    throw new Error(`Invalid width: "${width}"`);
+  }
+  if (!Number.isFinite(height)) {
+    throw new Error(`Invalid height: "${height}"`);
+  }
+  if (!Number.isFinite(lineCount)) {
+    throw new Error(`Invalid lineCount: "${lineCount}"`);
+  }
+
+  const testIdAttr = testId ? ` data-testid="${encodeHTML(testId)}"` : "";
   return `
     <foreignObject x="${x}" y="${y}" width="${width}" height="${height}">
-      <div xmlns="http://www.w3.org/1999/xhtml" class="${className}" style="--lines: ${lineCount};"${testIdAttr}>${encodeHTML(
+      <div xmlns="http://www.w3.org/1999/xhtml" class="${encodeHTML(className)}" style="--lines: ${lineCount};"${testIdAttr}>${encodeHTML(
         text,
       )}</div>
     </foreignObject>
@@ -128,37 +200,55 @@ const wrappedTextNode = ({
  * browser handles wrapping and the line count is taken from the `--lines`
  * custom property set on the element.
  *
- * @param {string} color Text color (CSS `color` property).
- * @returns {string} CSS rules block (without the surrounding selector).
+ * @param color Text color (CSS `color` property).
+ * @returns CSS rules block (without the surrounding selector).
  */
-const wrappedTextStyles = (color) => `
-    color: ${color};
-    margin: 0;
-    line-height: 1.2;
-    overflow-wrap: anywhere;
-    word-break: break-word;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: var(--lines);
-    line-clamp: var(--lines);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    padding-bottom: 0.15em;
-`;
+const wrappedTextStyles = (color: string): string => {
+  if (!isPrefixedHexColor(color)) {
+    throw new Error(`Invalid text color: "${color}"`);
+  }
+
+  return `
+      color: ${color};
+      margin: 0;
+      line-height: 1.2;
+      overflow-wrap: anywhere;
+      word-break: break-word;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: var(--lines);
+      line-clamp: var(--lines);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      padding-bottom: 0.15em;
+  `;
+};
 
 /**
  * Creates an icon with label to display repository/gist stats like forks, stars, etc.
  *
- * @param {string} icon The icon to display.
- * @param {number|string} label The label to display.
- * @param {string} testid The testid to assign to the label.
- * @param {number} iconSize The size of the icon.
- * @returns {string} Icon with label SVG object.
+ * The caller must ensure that the passed `icon` is properly sanitized!
+ *
+ * @param icon The sanitized icon to display.
+ * @param label The label to display.
+ * @param testid The testid to assign to the label.
+ * @param iconSize The size of the icon.
+ * @returns Icon with label SVG object.
  */
-const iconWithLabel = (icon, label, testid, iconSize) => {
+const iconWithLabel = (
+  icon: string,
+  label: number | string,
+  testid: string,
+  iconSize: number,
+): string => {
   if (typeof label === "number" && label <= 0) {
     return "";
   }
+
+  if (!Number.isFinite(iconSize)) {
+    throw new Error(`Invalid iconSize: "${iconSize}"`);
+  }
+
   const iconSvg = `
       <svg
         class="icon"
@@ -171,7 +261,7 @@ const iconWithLabel = (icon, label, testid, iconSize) => {
         ${icon}
       </svg>
     `;
-  const text = `<text data-testid="${testid}" class="gray">${label}</text>`;
+  const text = `<text data-testid="${encodeHTML(testid)}" class="gray">${encodeHTML(String(label))}</text>`;
   return flexLayout({ items: [iconSvg, text], gap: 20 }).join("");
 };
 
@@ -186,23 +276,34 @@ const UPSTREAM_API_ERRORS = [
 /**
  * Renders error message on the card.
  *
- * @param {object} args Function arguments.
- * @param {string} args.message Main error message.
- * @param {string} [args.secondaryMessage=""] The secondary error message.
- * @param {object} [args.renderOptions={}] Render options.
- * @param {string=} args.renderOptions.title_color Card title color.
- * @param {string=} args.renderOptions.text_color Card text color.
- * @param {string=} args.renderOptions.bg_color Card background color.
- * @param {string=} args.renderOptions.border_color Card border color.
- * @param {Parameters<typeof getCardColors>[0]["theme"]=} args.renderOptions.theme Card theme.
- * @param {boolean=} args.renderOptions.show_repo_link Whether to show repo link or not.
- * @returns {string} The SVG markup.
+ * @param args Function arguments.
+ * @param args.message Main error message.
+ * @param args.secondaryMessage The secondary error message.
+ * @param args.renderOptions Render options.
+ * @param args.renderOptions.title_color Card title color.
+ * @param args.renderOptions.text_color Card text color.
+ * @param args.renderOptions.bg_color Card background color.
+ * @param args.renderOptions.border_color Card border color.
+ * @param args.renderOptions.theme Card theme.
+ * @param args.renderOptions.show_repo_link Whether to show repo link or not.
+ * @returns The SVG markup.
  */
 const renderError = ({
   message,
   secondaryMessage = "",
   renderOptions = {},
-}) => {
+}: {
+  message: string;
+  secondaryMessage?: string;
+  renderOptions?: {
+    title_color?: string;
+    text_color?: string;
+    bg_color?: string;
+    border_color?: string;
+    theme?: string;
+    show_repo_link?: boolean;
+  };
+}): string => {
   const {
     title_color,
     text_color,
@@ -224,7 +325,7 @@ const renderError = ({
   });
 
   return `
-    <svg width="${ERROR_CARD_LENGTH}"  height="120" viewBox="0 0 ${ERROR_CARD_LENGTH} 120" fill="${bgColor}" xmlns="http://www.w3.org/2000/svg">
+    <svg width="${ERROR_CARD_LENGTH}"  height="120" viewBox="0 0 ${ERROR_CARD_LENGTH} 120" fill="${String(bgColor)}" xmlns="http://www.w3.org/2000/svg">
     <style>
     .text { font: 600 16px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${titleColor} }
     .small { font: 600 12px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${textColor} }
@@ -232,7 +333,7 @@ const renderError = ({
     </style>
     <rect x="0.5" y="0.5" width="${
       ERROR_CARD_LENGTH - 1
-    }" height="99%" rx="4.5" fill="${bgColor}" stroke="${borderColor}"/>
+    }" height="99%" rx="4.5" fill="${String(bgColor)}" stroke="${borderColor}"/>
     <text x="25" y="45" class="text">Something went wrong!${
       UPSTREAM_API_ERRORS.includes(secondaryMessage) || !show_repo_link
         ? ""
@@ -240,7 +341,7 @@ const renderError = ({
     }</text>
     <text data-testid="message" x="25" y="55" class="text small">
       <tspan x="25" dy="18">${encodeHTML(message)}</tspan>
-      <tspan x="25" dy="18" class="gray">${secondaryMessage}</tspan>
+      <tspan x="25" dy="18" class="gray">${encodeHTML(secondaryMessage)}</tspan>
     </text>
     </svg>
   `;
@@ -250,11 +351,11 @@ const renderError = ({
  * Retrieve text length based on Segoe UI font.
  *
  * @see https://stackoverflow.com/a/48172630/10629172
- * @param {string} str String to measure.
- * @param {number} fontSize Font size.
- * @returns {number} Text length.
+ * @param str String to measure.
+ * @param fontSize Font size.
+ * @returns Text length.
  */
-const measureText = (str, fontSize = 10) => {
+const measureText = (str: string, fontSize = 10): number => {
   // prettier-ignore
   const widths = [
     0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
@@ -306,7 +407,7 @@ const measureText = (str, fontSize = 10) => {
           return 1;
         }
         if (c.charCodeAt(0) < widths.length) {
-          return widths[c.charCodeAt(0)];
+          return widths[c.charCodeAt(0)] ?? avg;
         } else {
           return avg;
         }
@@ -322,12 +423,16 @@ const measureText = (str, fontSize = 10) => {
  * The browser still does the real wrap inside the foreignObject; this is only
  * used to size the SVG.
  *
- * @param {string} text Text to split.
- * @param {number} fontSize Font size in px (matches `measureText`).
- * @param {number} maxWidth Available wrap width in px.
- * @returns {string[]} Estimated wrapped lines.
+ * @param text Text to split.
+ * @param fontSize Font size in px (matches `measureText`).
+ * @param maxWidth Available wrap width in px.
+ * @returns Estimated wrapped lines.
  */
-const splitWrappedText = (text, fontSize, maxWidth) => {
+const splitWrappedText = (
+  text: string,
+  fontSize: number,
+  maxWidth: number,
+): Array<string> => {
   if (!text) {
     return [];
   }
@@ -342,15 +447,15 @@ const splitWrappedText = (text, fontSize, maxWidth) => {
   // Korean Hangul (U+AC00–U+D7AF) is intentionally NOT in the CJK range
   // because Korean wraps at word boundaries by default in HTML.
   // ASCII whitespace is collapsed to a single space per CSS `white-space: normal;`
-  text = text.replace(/[\t\n\r ]+/g, " ");
-  const tokens = text.match(
+  const normalizedText = text.replace(/[\t\n\r ]+/g, " ");
+  const tokens = normalizedText.match(
     /\s|[\u3000-\u9FFF\uFF00-\uFFEF]|[^\s\u3000-\u9FFF\uFF00-\uFFEF]+/g,
   );
   if (!tokens) {
     return [];
   }
 
-  const takeFittingSegment = (token, availableWidth) => {
+  const takeFittingSegment = (token: string, availableWidth: number) => {
     const characters = token.split("");
     let segment = "";
     let width = 0;
@@ -379,7 +484,7 @@ const splitWrappedText = (text, fontSize, maxWidth) => {
       if (currentWidth === 0) {
         continue;
       }
-      lines[lines.length - 1] += token;
+      lines[lines.length - 1] = (lines[lines.length - 1] ?? "") + token;
       currentWidth += measureText(token, fontSize);
       continue;
     }
@@ -389,7 +494,7 @@ const splitWrappedText = (text, fontSize, maxWidth) => {
     while (remaining) {
       const w = measureText(remaining, fontSize);
       if (currentWidth + w <= maxWidth) {
-        lines[lines.length - 1] += remaining;
+        lines[lines.length - 1] = (lines[lines.length - 1] ?? "") + remaining;
         currentWidth += w;
         break;
       }
@@ -402,7 +507,7 @@ const splitWrappedText = (text, fontSize, maxWidth) => {
 
       // An atom wider than the box wraps mid-glyph (overflow-wrap: anywhere).
       const { segment, width } = takeFittingSegment(remaining, maxWidth);
-      lines[lines.length - 1] += segment;
+      lines[lines.length - 1] = (lines[lines.length - 1] ?? "") + segment;
       currentWidth = width;
       remaining = remaining.slice(segment.length);
     }
@@ -415,13 +520,18 @@ const splitWrappedText = (text, fontSize, maxWidth) => {
  * Estimate how many lines a string will wrap to when laid out greedily at the
  * given font size inside a box of width `maxWidth`, capped at `maxLines`.
  *
- * @param {string} text Text to estimate.
- * @param {number} fontSize Font size in px (matches `measureText`).
- * @param {number} maxWidth Available wrap width in px.
- * @param {number} maxLines Cap on the returned line count.
- * @returns {number} Estimated line count, at least 1, at most `maxLines`.
+ * @param text Text to estimate.
+ * @param fontSize Font size in px (matches `measureText`).
+ * @param maxWidth Available wrap width in px.
+ * @param maxLines Cap on the returned line count.
+ * @returns Estimated line count, at least 1, at most `maxLines`.
  */
-const countWrappedLines = (text, fontSize, maxWidth, maxLines) => {
+const countWrappedLines = (
+  text: string,
+  fontSize: number,
+  maxWidth: number,
+  maxLines: number,
+): number => {
   return Math.min(
     Math.max(1, splitWrappedText(text, fontSize, maxWidth).length),
     maxLines,