feat: Exported some TS types

ZeeCoder · ZeeCoder · commit 3895bdf98687 · 2022-11-22T21:18:34.000+01:00
The following types were exported so that it's easier to compose hook options: - ObservedSize - ResizeHandler - ResizeObserverBoxOptions - RoundingFunction Tests were updated as well to guarantee the new API interface. Resolves #98
diff --git a/src/index.ts b/src/index.ts
@@ -10,20 +10,20 @@ import {
 import useResolvedElement from "./utils/useResolvedElement";
 import extractSize from "./utils/extractSize";
 
-type ObservedSize = {
+export type ObservedSize = {
   width: number | undefined;
   height: number | undefined;
 };
 
-type ResizeHandler = (size: ObservedSize) => void;
+export type ResizeHandler = (size: ObservedSize) => void;
 
 type HookResponse<T extends Element> = {
   ref: RefCallback<T>;
 } & ObservedSize;
 
 // Declaring my own type here instead of using the one provided by TS (available since 4.2.2), because this way I'm not
 // forcing consumers to use a specific TS version.
-type ResizeObserverBoxOptions =
+export type ResizeObserverBoxOptions =
   | "border-box"
   | "content-box"
   | "device-pixel-content-box";
@@ -34,7 +34,7 @@ declare global {
   }
 }
 
-type RoundingFunction = (n: number) => number;
+export type RoundingFunction = (n: number) => number;
 
 function useResizeObserver<T extends Element>(
   opts: {
diff --git a/tests/basic.tsx b/tests/basic.tsx
@@ -2,10 +2,9 @@
 import React, { useRef, useState } from "react";
 import { render, cleanup, act } from "@testing-library/react";
 import createController from "./utils/createController";
-import useResizeObserver from "../";
+import useResizeObserver, { ObservedSize, ResizeHandler } from "../";
 import useMergedCallbackRef from "./utils/useMergedCallbackRef";
 import awaitNextFrame from "./utils/awaitNextFrame";
-import { ObservedSize } from "./utils";
 import useRenderTrigger from "./utils/useRenderTrigger";
 
 afterEach(() => {
@@ -341,10 +340,9 @@ describe("Basic tests", () => {
 
   it("should handle if the onResize handler changes, with the correct render counts", async () => {
     const controller = createController();
-    type OnResizeHandler = (size: ObservedSize) => void;
-    let changeOnResizeHandler = (handler: OnResizeHandler) => {};
+    let changeOnResizeHandler = (handler: ResizeHandler) => {};
     const Test = () => {
-      const [onResize, setOnResize] = useState<OnResizeHandler>(() => () => {});
+      const [onResize, setOnResize] = useState<ResizeHandler>(() => () => {});
       changeOnResizeHandler = (handler) => setOnResize(() => handler);
       const { ref, width, height } = useResizeObserver({ onResize });
       controller.reportMeasuredSize({ width, height });
diff --git a/tests/testing-lib.tsx b/tests/testing-lib.tsx
@@ -1,12 +1,17 @@
 // Tests written with react testing library
 import React, { useRef, useState, useCallback } from "react";
-import useResizeObserver from "../";
+import useResizeObserver, {
+  ResizeHandler,
+  ObservedSize,
+  ResizeObserverBoxOptions,
+  RoundingFunction,
+} from "../";
 import { render, cleanup, act } from "@testing-library/react";
 import useRenderTrigger from "./utils/useRenderTrigger";
 import awaitNextFrame from "./utils/awaitNextFrame";
 import createController from "./utils/createController";
 import useMergedCallbackRef from "./utils/useMergedCallbackRef";
-import { ObservedSize, supports } from "./utils";
+import { supports } from "./utils";
 
 afterEach(() => {
   cleanup();
@@ -77,11 +82,13 @@ describe("Testing Lib: Basics", () => {
     const controller = createController();
     const Test = () => {
       const ref = useRef(null);
+      // Declaring onResize here only to test the availability and correctness of the exported `ResizeHandler` function
+      const onResize: ResizeHandler = (size) => {
+        controller.reportMeasuredSize(size);
+      };
       useResizeObserver({
         ref,
-        onResize: (size) => {
-          controller.reportMeasuredSize(size);
-        },
+        onResize,
       });
 
       return <div ref={ref} style={{ width: 10, height: 20 }} />;
@@ -577,7 +584,7 @@ describe("Testing Lib: Resize Observer Instance Counting Block", () => {
     };
     const c2 = {} as Controller;
     const Test = () => {
-      const [rounder, setRounder] = useState<typeof Math.ceil | undefined>(
+      const [rounder, setRounder] = useState<RoundingFunction | undefined>(
         () => Math.ceil
       );
       const { ref, width, height } = useResizeObserver<HTMLDivElement>({
diff --git a/tests/utils/index.tsx b/tests/utils/index.tsx
@@ -11,8 +11,3 @@ new ResizeObserver((entries) => {
     entries[0].devicePixelContentBoxSize
   );
 }).observe(document.body);
-
-export type ObservedSize = {
-  width: number | undefined;
-  height: number | undefined;
-};
