fix: resolve biome lint and formatting errors

Rednegniw · Rednegniw · commit 3e81d62e9f65 · 2026-02-18T00:14:31.000+01:00
diff --git a/apps/example/src/demos/PerformanceDemo.tsx b/apps/example/src/demos/PerformanceDemo.tsx
@@ -86,11 +86,7 @@ function TimingBadge({ timeMs }: { timeMs: number | undefined }) {
 
 // ─── Native test run ─────────────────────────────────────────────────────────
 
-function NativeTestRun({
-  onAllDone,
-}: {
-  onAllDone: (results: TimingResult[]) => void;
-}) {
+function NativeTestRun({ onAllDone }: { onAllDone: (results: TimingResult[]) => void }) {
   const startTime = useRef(performance.now()).current;
   const [times, setTimes] = useState<Record<string, number>>({});
   const reportedRef = useRef(false);
@@ -129,9 +125,7 @@ function NativeTestRun({
           }}
         >
           <VisibilityProbe label="Text" onVisible={handleVisible} startTime={startTime}>
-            <Text
-              style={{ fontFamily: FONT_REGULAR, fontSize: FONT_SIZE, color: colors.text }}
-            >
+            <Text style={{ fontFamily: FONT_REGULAR, fontSize: FONT_SIZE, color: colors.text }}>
               {FORMATTED_VALUE}
             </Text>
           </VisibilityProbe>
@@ -513,7 +507,7 @@ export const PerformanceDemoSkia = () => {
           </Text>
           {coldAvg !== null && (
             <Text style={{ fontSize: 12, color: colors.textSecondary, fontFamily: "monospace" }}>
-              Cold ({coldRuns.length})   {coldAvg.toFixed(1).padStart(7)}ms
+              Cold ({coldRuns.length}) {coldAvg.toFixed(1).padStart(7)}ms
             </Text>
           )}
           {cachedAvg !== null && (
diff --git a/packages/number-flow-react-native/__tests__/mask.test.ts b/packages/number-flow-react-native/__tests__/mask.test.ts
@@ -1,5 +1,5 @@
-import { computeAdaptiveMaskHeights } from "../src/core/mask";
 import type { CharLayout } from "../src/core/layout";
+import { computeAdaptiveMaskHeights } from "../src/core/mask";
 import type { GlyphMetrics } from "../src/core/types";
 
 /**
diff --git a/packages/number-flow-react-native/src/core/layout.ts b/packages/number-flow-react-native/src/core/layout.ts
@@ -1,6 +1,6 @@
 import { SUPERSCRIPT_SCALE } from "./constants";
-import type { GlyphMetrics, KeyedPart, TextAlign } from "./types";
 import { isDigitChar, localeDigitValue } from "./numerals";
+import type { GlyphMetrics, KeyedPart, TextAlign } from "./types";
 
 /**
  * Assigns x positions to each entry based on text alignment.
diff --git a/packages/number-flow-react-native/src/core/numerals/digits.ts b/packages/number-flow-react-native/src/core/numerals/digits.ts
@@ -12,17 +12,28 @@ const digitStringsCache = new Map<string, string[]>();
 export function hanidecDigitValue(charCode: number): number {
   "worklet";
   switch (charCode) {
-    case 0x3007: return 0;  // 〇
-    case 0x4e00: return 1;  // 一
-    case 0x4e8c: return 2;  // 二
-    case 0x4e09: return 3;  // 三
-    case 0x56db: return 4;  // 四
-    case 0x4e94: return 5;  // 五
-    case 0x516d: return 6;  // 六
-    case 0x4e03: return 7;  // 七
-    case 0x516b: return 8;  // 八
-    case 0x4e5d: return 9;  // 九
-    default: return -1;
+    case 0x3007:
+      return 0; // 〇
+    case 0x4e00:
+      return 1; // 一
+    case 0x4e8c:
+      return 2; // 二
+    case 0x4e09:
+      return 3; // 三
+    case 0x56db:
+      return 4; // 四
+    case 0x4e94:
+      return 5; // 五
+    case 0x516d:
+      return 6; // 六
+    case 0x4e03:
+      return 7; // 七
+    case 0x516b:
+      return 8; // 八
+    case 0x4e5d:
+      return 9; // 九
+    default:
+      return -1;
   }
 }
 
diff --git a/packages/number-flow-react-native/src/core/timeLayout.ts b/packages/number-flow-react-native/src/core/timeLayout.ts
@@ -1,6 +1,6 @@
 import { assignXPositions, type CharLayout } from "./layout";
-import type { GlyphMetrics, TextAlign } from "./types";
 import { isDigitChar, localeDigitValue } from "./numerals";
+import type { GlyphMetrics, TextAlign } from "./types";
 
 /**
  * Keys for each digit position within a time segment.
diff --git a/packages/number-flow-react-native/src/core/useFlowPipeline.ts b/packages/number-flow-react-native/src/core/useFlowPipeline.ts
@@ -87,7 +87,11 @@ export function useFlowPipeline(input: FlowPipelineInput): FlowPipelineOutput {
   // 4. Animation lifecycle
   useAnimationLifecycle(
     input.layout,
-    { spin: resolvedSpinTiming, opacity: resolvedOpacityTiming, transform: resolvedTransformTiming },
+    {
+      spin: resolvedSpinTiming,
+      opacity: resolvedOpacityTiming,
+      transform: resolvedTransformTiming,
+    },
     input.onAnimationsStart,
     input.onAnimationsFinish,
   );
@@ -98,7 +102,7 @@ export function useFlowPipeline(input: FlowPipelineInput): FlowPipelineOutput {
   // 6. Accessibility label
   const accessibilityLabel = useMemo(() => {
     if (input.keyedParts.length === 0) return undefined;
-    
+
     return input.keyedParts.map((p) => p.char).join("");
   }, [input.keyedParts]);
 
diff --git a/packages/number-flow-react-native/src/core/useFormattedValue.ts b/packages/number-flow-react-native/src/core/useFormattedValue.ts
@@ -23,10 +23,10 @@ export function useFormattedValue(
   // Serialize format/locales to a stable string — avoids re-runs when callers pass inline objects
   const formatKey = useMemo(() => JSON.stringify([locales, format]), [locales, format]);
 
+  // biome-ignore lint/correctness/useExhaustiveDependencies: formatKey serializes locales+format into a stable string to avoid re-runs on inline objects
   return useMemo(() => {
     if (value === undefined) return undefined;
     const formatter = getOrCreateFormatter(locales, format);
     return `${prefix ?? ""}${formatter.format(value)}${suffix ?? ""}`;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [value, prefix, suffix, formatKey]);
 }
diff --git a/packages/number-flow-react-native/src/core/useNumberFormatting.ts b/packages/number-flow-react-native/src/core/useNumberFormatting.ts
@@ -155,10 +155,10 @@ export function useNumberFormatting(
   // Serialize format/locales to a stable string — avoids re-runs when callers pass inline objects
   const formatKey = useMemo(() => JSON.stringify([locales, format]), [locales, format]);
 
+  // biome-ignore lint/correctness/useExhaustiveDependencies: formatKey serializes locales+format into a stable string to avoid re-runs on inline objects
   return useMemo(() => {
     if (value === undefined) return [];
     const formatter = getOrCreateFormatter(locales, format);
     return formatToKeyedParts(value, formatter, locales, prefix, suffix);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [value, prefix, suffix, formatKey]);
 }
diff --git a/packages/number-flow-react-native/src/core/useTimeFormatting.ts b/packages/number-flow-react-native/src/core/useTimeFormatting.ts
@@ -1,5 +1,5 @@
 import { useMemo } from "react";
-import { digitPart, symbolPart, type KeyedPart } from "./types";
+import { digitPart, type KeyedPart, symbolPart } from "./types";
 
 /**
  * Converts 24h hours (0-23) to 12h display value (1-12).
diff --git a/packages/number-flow-react-native/src/core/useTimingResolution.ts b/packages/number-flow-react-native/src/core/useTimingResolution.ts
@@ -1,10 +1,10 @@
-import type { TimingConfig } from "./types";
 import {
   DEFAULT_OPACITY_TIMING,
   DEFAULT_SPIN_TIMING,
   DEFAULT_TRANSFORM_TIMING,
   ZERO_TIMING,
 } from "./timing";
+import type { TimingConfig } from "./types";
 import { useCanAnimate } from "./useCanAnimate";
 
 interface ResolvedTimings {
@@ -27,9 +27,7 @@ export function useTimingResolution(
   const canAnimate = useCanAnimate(respectMotionPreference);
   const shouldAnimate = (animated ?? true) && canAnimate;
 
-  const resolvedSpinTiming = shouldAnimate
-    ? (spinTiming ?? DEFAULT_SPIN_TIMING)
-    : ZERO_TIMING;
+  const resolvedSpinTiming = shouldAnimate ? (spinTiming ?? DEFAULT_SPIN_TIMING) : ZERO_TIMING;
 
   const resolvedOpacityTiming = shouldAnimate
     ? (opacityTiming ?? DEFAULT_OPACITY_TIMING)
diff --git a/packages/number-flow-react-native/src/native/NumberFlow.tsx b/packages/number-flow-react-native/src/native/NumberFlow.tsx
@@ -1,9 +1,9 @@
 import MaskedView from "@rednegniw/masked-view";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { type LayoutChangeEvent, Text, View } from "react-native";
+import { getFormatCharacters } from "../core/intlHelpers";
 import { computeKeyedLayout } from "../core/layout";
 import { detectNumberingSystem, getDigitStrings } from "../core/numerals";
-import { getFormatCharacters } from "../core/intlHelpers";
 import { useFlowPipeline } from "../core/useFlowPipeline";
 import { useNumberFormatting } from "../core/useNumberFormatting";
 import { getDigitCount } from "../core/utils";
@@ -35,48 +35,29 @@ export const NumberFlow = ({
 }: NumberFlowProps) => {
   const formatChars = useMemo(
     () => getFormatCharacters(locales, format, prefix, suffix),
-    [locales, format, prefix, suffix]
-  );
-  const numberingSystem = useMemo(
-    () => detectNumberingSystem(locales, format),
-    [locales, format]
-  );
-  const digitStrings = useMemo(
-    () => getDigitStrings(numberingSystem),
-    [numberingSystem]
-  );
-  const { metrics, MeasureElement } = useMeasuredGlyphMetrics(
-    nfStyle,
-    formatChars,
-    digitStrings
+    [locales, format, prefix, suffix],
   );
+  const numberingSystem = useMemo(() => detectNumberingSystem(locales, format), [locales, format]);
+  const digitStrings = useMemo(() => getDigitStrings(numberingSystem), [numberingSystem]);
+  const { metrics, MeasureElement } = useMeasuredGlyphMetrics(nfStyle, formatChars, digitStrings);
 
   if (__DEV__) {
     if (!nfStyle.fontSize) {
-      warnOnce(
-        "nf-fontSize",
-        "style.fontSize is required for NumberFlow to measure glyphs."
-      );
+      warnOnce("nf-fontSize", "style.fontSize is required for NumberFlow to measure glyphs.");
     }
     if (digits) {
       for (const [posStr, constraint] of Object.entries(digits)) {
         if (constraint.max < 1 || constraint.max > 9) {
           warnOnce(
             `nf-digit-max-${posStr}`,
-            `digits[${posStr}].max must be between 1 and 9, got ${constraint.max}.`
+            `digits[${posStr}].max must be between 1 and 9, got ${constraint.max}.`,
           );
         }
       }
     }
   }
 
-  const keyedParts = useNumberFormatting(
-    value,
-    format,
-    locales,
-    prefix,
-    suffix
-  );
+  const keyedParts = useNumberFormatting(value, format, locales, prefix, suffix);
 
   const [containerWidth, setContainerWidth] = useState(0);
   const handleContainerLayout = useCallback((e: LayoutChangeEvent) => {
@@ -92,13 +73,7 @@ export const NumberFlow = ({
     if (containerWidth === 0 && textAlign !== "left") return [];
 
     if (keyedParts.length === 0) return [];
-    return computeKeyedLayout(
-      keyedParts,
-      metrics,
-      containerWidth,
-      textAlign,
-      digitStrings
-    );
+    return computeKeyedLayout(keyedParts, metrics, containerWidth, textAlign, digitStrings);
   }, [metrics, keyedParts, containerWidth, textAlign, digitStrings]);
 
   const {
@@ -135,7 +110,7 @@ export const NumberFlow = ({
       ...nfStyle,
       color: nfStyle.color ?? "#000000",
     }),
-    [nfStyle]
+    [nfStyle],
   );
 
   const resolvedMask = mask ?? true;
@@ -179,7 +154,6 @@ export const NumberFlow = ({
     );
   }, [resolvedMask, metrics, maskTop, maskBottom, topSteps, bottomSteps]);
 
-  
   const [slotsReady, setSlotsReady] = useState(false);
   const metricsReady = !!metrics;
 
diff --git a/packages/number-flow-react-native/src/native/TimeFlow.tsx b/packages/number-flow-react-native/src/native/TimeFlow.tsx
@@ -201,8 +201,6 @@ export const TimeFlow = ({
       </View>
     );
   }
-
-  {/* Placeholder branch: show plain Text while slot tree loads */}
   if (!slotsReady) {
     return (
       <View
diff --git a/packages/number-flow-react-native/src/skia/SkiaNumberFlow.tsx b/packages/number-flow-react-native/src/skia/SkiaNumberFlow.tsx
@@ -2,12 +2,12 @@ import { Group, LinearGradient, Paint, Rect as SkiaRect, vec } from "@shopify/re
 import { useMemo } from "react";
 import type { SharedValue } from "react-native-reanimated";
 import { MASK_WIDTH_RATIO } from "../core/constants";
-import { computeKeyedLayout, computeStringLayout, type CharLayout } from "../core/layout";
+import { getFormatCharacters } from "../core/intlHelpers";
+import { type CharLayout, computeKeyedLayout, computeStringLayout } from "../core/layout";
 import { detectNumberingSystem, getDigitStrings, getZeroCodePoint } from "../core/numerals";
 import type { GlyphMetrics, KeyedPart, SkiaNumberFlowProps } from "../core/types";
 import { useAccessibilityAnnouncement } from "../core/useAccessibilityAnnouncement";
 import { useFlowPipeline } from "../core/useFlowPipeline";
-import { getFormatCharacters } from "../core/intlHelpers";
 import { useNumberFormatting } from "../core/useNumberFormatting";
 import { getDigitCount } from "../core/utils";
 import { warnOnce } from "../core/warnings";
diff --git a/packages/number-flow-react-native/src/skia/index.ts b/packages/number-flow-react-native/src/skia/index.ts
@@ -1,5 +1,5 @@
+export type { SkiaTimeFlowProps } from "../core/timeTypes";
+export type { SkiaNumberFlowProps } from "../core/types";
 export { SkiaNumberFlow } from "./SkiaNumberFlow";
 export { SkiaTimeFlow } from "./SkiaTimeFlow";
 export { useSkiaFont } from "./useSkiaFont";
-export type { SkiaNumberFlowProps } from "../core/types";
-export type { SkiaTimeFlowProps } from "../core/timeTypes";
diff --git a/packages/number-flow-react-native/src/skia/useScrubbing.ts b/packages/number-flow-react-native/src/skia/useScrubbing.ts
@@ -7,10 +7,10 @@ import {
   useDerivedValue,
 } from "react-native-reanimated";
 import { assignXPositions, type CharLayout } from "../core/layout";
+import { countDigits } from "../core/numerals";
 import type { GlyphMetrics, TextAlign } from "../core/types";
 import { useDebouncedWidths } from "../core/useDebouncedWidths";
 import { useWorkletFormatting } from "../core/useWorkletFormatting";
-import { countDigits } from "../core/numerals";
 
 // ---------------------------------------------------------------------------
 // useScrubbingBridge
diff --git a/packages/number-flow-react-native/src/skia/useSkiaFont.ts b/packages/number-flow-react-native/src/skia/useSkiaFont.ts
@@ -1,5 +1,5 @@
-import { matchFont, useFont } from "@shopify/react-native-skia";
 import type { DataSourceParam, SkFont } from "@shopify/react-native-skia";
+import { matchFont, useFont } from "@shopify/react-native-skia";
 import { useMemo } from "react";
 
 /**
