Migrate to biome

.vscode/settings.json

@@ -1,4 +1,14 @@
 {
-  "editor.defaultFormatter": "rome.rome",
-  "editor.formatOnSave": true
+  "[typescript]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "editor.formatOnSave": true,
+  "editor.formatOnPaste": true,
+  "editor.formatOnType": true,
+  "editor.codeActionsOnSave": {
+    "quickfix.biome": true
+  }
 }

rome.json → biome.json

@@ -1,5 +1,5 @@
 {
-  "$schema": "https://docs.rome.tools/schemas/12.1.3/schema.json",
+  "$schema": "https://biomejs.dev/schemas/1.0.0/schema.json",
   "organizeImports": {
     "enabled": false
   },
@@ -14,15 +14,10 @@
   "formatter": {
     "indentStyle": "space",
     "lineWidth": 100,
-    "indentSize": 2,
+    "indentWidth": 2,
     "formatWithErrors": false
   },
   "files": {
     "ignore": ["node_modules/*", "build/*"]
-  },
-  "javascript": {
-    "formatter": {
-      "quoteStyle": "single"
-    }
   }
 }

lib/OnScreen.tsx

@@ -6,8 +6,8 @@ import React, {
   ReactElement,
   ElementType,
   ComponentProps,
-} from 'react';
-import { UseOnScreenParameters, useOnScreen } from './useOnScreen';
+} from "react";
+import { UseOnScreenParameters, useOnScreen } from "./useOnScreen";
 
 /**
  * OnScreen component own props.
@@ -21,7 +21,7 @@ type OnScreenOwnProps<T extends HTMLElement, AS extends ElementType = ElementTyp
    * Element to render.
    */
   as?: AS;
-} & Omit<UseOnScreenParameters<T>, 'ref'>;
+} & Omit<UseOnScreenParameters<T>, "ref">;
 
 /**
  * OnScreen component props with generic element props.
@@ -65,7 +65,7 @@ export const OnScreen = <T extends HTMLElement, AS extends ElementType = Element
 
   const renderChildren = useCallback(
     () => Children.only(children({ ref, ...useOnScreenData })),
-    [useOnScreenData, children, ref],
+    [useOnScreenData, children],
   );
 
   if (Component !== undefined) {

lib/__tests__/OnScreen.test.tsx

@@ -1,24 +1,24 @@
-import React from 'react';
-import { OnScreen } from '../OnScreen';
+import React from "react";
+import { OnScreen } from "../OnScreen";
 import {
   ComponentRenderer,
   createIsOnScreenValueTest,
   createOnceParameterTest,
   createRenderTest,
-} from './testUtils';
+} from "./testUtils";
 
 const renderComponent: ComponentRenderer = (settings) => (
   <OnScreen<HTMLDivElement> {...settings}>
     {({ ref, isOnScreen }) => (
-      <div ref={ref} data-testid={`target${isOnScreen ? '-isOnScreen' : ''}`} />
+      <div ref={ref} data-testid={`target${isOnScreen ? "-isOnScreen" : ""}`} />
     )}
   </OnScreen>
 );
 
-describe('OnScreen', () => {
-  it('OnScreen component renders', createRenderTest(renderComponent));
+describe("OnScreen", () => {
+  it("OnScreen component renders", createRenderTest(renderComponent));
 
-  it('isOnScreen value changes', createIsOnScreenValueTest(renderComponent));
+  it("isOnScreen value changes", createIsOnScreenValueTest(renderComponent));
 
-  it('Once prop is working as expected', createOnceParameterTest(renderComponent));
+  it("Once prop is working as expected", createOnceParameterTest(renderComponent));
 });

lib/__tests__/testUtils.ts

@@ -1,16 +1,16 @@
 /*global expect*/
-import { act, render } from '@testing-library/react';
-import { mockIntersectionObserver } from 'jsdom-testing-mocks';
-import { ReactElement } from 'react';
-import { UseOnScreenParameters } from '../useOnScreen';
+import { act, render } from "@testing-library/react";
+import { mockIntersectionObserver } from "jsdom-testing-mocks";
+import { ReactElement } from "react";
+import { UseOnScreenParameters } from "../useOnScreen";
 
 /**
  * Renders component.
  */
-export type ComponentRenderer = (settings?: Pick<UseOnScreenParameters, 'once'>) => ReactElement;
+export type ComponentRenderer = (settings?: Pick<UseOnScreenParameters, "once">) => ReactElement;
 
-const targetTestId = 'target';
-const targetIsOnScreenTestId = 'target-isOnScreen';
+const targetTestId = "target";
+const targetIsOnScreenTestId = "target-isOnScreen";
 
 const io = mockIntersectionObserver();
 

lib/__tests__/useOnScreen.test.tsx

@@ -1,25 +1,25 @@
-import React, { useRef } from 'react';
-import { useOnScreen, UseOnScreenParameters } from '../useOnScreen';
+import React, { useRef } from "react";
+import { useOnScreen, UseOnScreenParameters } from "../useOnScreen";
 import {
   ComponentRenderer,
   createIsOnScreenValueTest,
   createOnceParameterTest,
   createRenderTest,
-} from './testUtils';
+} from "./testUtils";
 
-const ComponentTemplate = (props: Pick<UseOnScreenParameters, 'once'>) => {
+const ComponentTemplate = (props: Pick<UseOnScreenParameters, "once">) => {
   const ref = useRef(null);
   const { isOnScreen } = useOnScreen({ ref, ...props });
 
-  return <div ref={ref} data-testid={`target${isOnScreen ? '-isOnScreen' : ''}`} />;
+  return <div ref={ref} data-testid={`target${isOnScreen ? "-isOnScreen" : ""}`} />;
 };
 
 const renderComponent: ComponentRenderer = (settings) => <ComponentTemplate {...settings} />;
 
-describe('useOnScreen', () => {
-  it('useOnScreen component renders', createRenderTest(renderComponent));
+describe("useOnScreen", () => {
+  it("useOnScreen component renders", createRenderTest(renderComponent));
 
-  it('isOnScreen value changes', createIsOnScreenValueTest(renderComponent));
+  it("isOnScreen value changes", createIsOnScreenValueTest(renderComponent));
 
-  it('Once prop is working as expected', createOnceParameterTest(renderComponent));
+  it("Once prop is working as expected", createOnceParameterTest(renderComponent));
 });

lib/__tests__/withOnScreen.test.tsx

@@ -1,16 +1,16 @@
-import React, { forwardRef } from 'react';
-import { useOnScreen } from '../useOnScreen';
-import { withOnScreen } from '../withOnScreen';
+import React, { forwardRef } from "react";
+import { useOnScreen } from "../useOnScreen";
+import { withOnScreen } from "../withOnScreen";
 import {
   ComponentRenderer,
   createIsOnScreenValueTest,
   createOnceParameterTest,
   createRenderTest,
-} from './testUtils';
+} from "./testUtils";
 
 const ComponentTemplate = forwardRef<HTMLDivElement, ReturnType<typeof useOnScreen>>(
   function ComponentTemplate({ isOnScreen }, ref) {
-    return <div ref={ref} data-testid={`target${isOnScreen ? '-isOnScreen' : ''}`} />;
+    return <div ref={ref} data-testid={`target${isOnScreen ? "-isOnScreen" : ""}`} />;
   },
 );
 
@@ -19,10 +19,10 @@ const renderComponent: ComponentRenderer = (settings) => {
   return <WithOnScreen />;
 };
 
-describe('withOnScreen', () => {
-  it('withOnScreen component renders', createRenderTest(renderComponent));
+describe("withOnScreen", () => {
+  it("withOnScreen component renders", createRenderTest(renderComponent));
 
-  it('isOnScreen value changes', createIsOnScreenValueTest(renderComponent));
+  it("isOnScreen value changes", createIsOnScreenValueTest(renderComponent));
 
-  it('Once prop is working as expected', createOnceParameterTest(renderComponent));
+  it("Once prop is working as expected", createOnceParameterTest(renderComponent));
 });

lib/index.ts

@@ -1,6 +1,6 @@
-export { useOnScreen } from './useOnScreen';
-export type { UseOnScreenParameters } from './useOnScreen';
-export { OnScreen } from './OnScreen';
-export type { OnScreenProps } from './OnScreen';
-export { withOnScreen } from './withOnScreen';
-export type { WithOnScreenWrappedComponent } from './withOnScreen';
+export { useOnScreen } from "./useOnScreen";
+export type { UseOnScreenParameters } from "./useOnScreen";
+export { OnScreen } from "./OnScreen";
+export type { OnScreenProps } from "./OnScreen";
+export { withOnScreen } from "./withOnScreen";
+export type { WithOnScreenWrappedComponent } from "./withOnScreen";

lib/internal/assignRefs.ts

@@ -1,4 +1,4 @@
-import { MutableRefObject, Ref } from 'react';
+import { MutableRefObject, Ref } from "react";
 
 /**
  * Takes both ref objects and ref functions and returns assigned ref function.
@@ -7,12 +7,12 @@ import { MutableRefObject, Ref } from 'react';
  */
 export const assignRefs = <T>(...refs: Ref<T | null>[]) => {
   return (node: T | null) => {
-    refs.forEach((r) => {
-      if (typeof r === 'function') {
-        r(node);
-      } else if (r) {
-        (r as MutableRefObject<T | null>).current = node;
+    for (const ref of refs) {
+      if (typeof ref === "function") {
+        ref(node);
+      } else if (ref) {
+        (ref as MutableRefObject<T | null>).current = node;
       }
-    });
+    }
   };
 };

lib/internal/index.ts

@@ -1 +1 @@
-export * from './assignRefs';
+export * from "./assignRefs";

lib/useOnScreen.tsx

@@ -1,4 +1,4 @@
-import { RefObject, useEffect, useState } from 'react';
+import { RefObject, useEffect, useState } from "react";
 
 /**
  * UseOnScreen hook settings.

lib/withOnScreen.tsx

@@ -1,7 +1,7 @@
-import React, { useRef, ComponentType, forwardRef, ForwardedRef } from 'react';
-import hoistNonReactStatics from 'hoist-non-react-statics';
-import { UseOnScreenParameters, useOnScreen } from './useOnScreen';
-import { assignRefs } from './internal';
+import React, { useRef, ComponentType, forwardRef, ForwardedRef } from "react";
+import hoistNonReactStatics from "hoist-non-react-statics";
+import { UseOnScreenParameters, useOnScreen } from "./useOnScreen";
+import { assignRefs } from "./internal";
 
 /**
  * WithOnScreen wrapped component with injected props.
@@ -30,7 +30,7 @@ export type WithOnScreenWrappedComponent<Props extends Record<string, unknown>,>
  */
 export const withOnScreen = <P extends Record<string, unknown>, T extends HTMLElement>(
   WrappedComponent: WithOnScreenWrappedComponent<P>,
-  settings?: Omit<UseOnScreenParameters<T>, 'ref'>,
+  settings?: Omit<UseOnScreenParameters<T>, "ref">,
 ) => {
   const WithOnScreen = (props: P, forwardedRef: ForwardedRef<T>) => {
     const ref = useRef<T>(null);
@@ -42,7 +42,7 @@ export const withOnScreen = <P extends Record<string, unknown>, T extends HTMLEl
   hoistNonReactStatics(WithOnScreen, WrappedComponent);
 
   WithOnScreen.displayName = `WithOnScreen(${
-    WrappedComponent.displayName || WrappedComponent.name || 'Component'
+    WrappedComponent.displayName || WrappedComponent.name || "Component"
   })`;
 
   return forwardRef(WithOnScreen);