From e056e191499c713dc7bdd872530cfb9786e1af3e Mon Sep 17 00:00:00 2001 From: Hubert Viktor Date: Mon, 21 Nov 2022 13:09:42 +0100 Subject: [PATCH 1/2] feat: Exported some TS types 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 --- src/index.ts | 8 ++++---- tests/basic.tsx | 8 +++----- tests/testing-lib.tsx | 19 +++++++++++++------ tests/utils/index.tsx | 5 ----- 4 files changed, 20 insertions(+), 20 deletions(-) diff --git a/src/index.ts b/src/index.ts index eb573c7..21d1350 100644 --- a/src/index.ts +++ b/src/index.ts @@ -10,12 +10,12 @@ 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 = { ref: RefCallback; @@ -23,7 +23,7 @@ type HookResponse = { // 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( opts: { diff --git a/tests/basic.tsx b/tests/basic.tsx index d963e13..b8a0430 100644 --- 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(() => () => {}); + const [onResize, setOnResize] = useState(() => () => {}); 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 index 919bdcb..d5f011d 100644 --- 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
; @@ -577,7 +584,7 @@ describe("Testing Lib: Resize Observer Instance Counting Block", () => { }; const c2 = {} as Controller; const Test = () => { - const [rounder, setRounder] = useState( + const [rounder, setRounder] = useState( () => Math.ceil ); const { ref, width, height } = useResizeObserver({ diff --git a/tests/utils/index.tsx b/tests/utils/index.tsx index d981144..a1b19a4 100644 --- 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; -}; From c1803f110651e3dbf0e167ba91def96f42d546db Mon Sep 17 00:00:00 2001 From: semantic-release-bot Date: Mon, 21 Nov 2022 12:25:24 +0000 Subject: [PATCH 2/2] chore(release): 9.1.0-alpha.1 [skip ci] # [9.1.0-alpha.1](https://github.com/ZeeCoder/use-resize-observer/compare/v9.0.2...v9.1.0-alpha.1) (2022-11-21) ### Features * Exported some TS types ([e056e19](https://github.com/ZeeCoder/use-resize-observer/commit/e056e191499c713dc7bdd872530cfb9786e1af3e)), closes [#98](https://github.com/ZeeCoder/use-resize-observer/issues/98) --- CHANGELOG.md | 6 ++++++ package.json | 2 +- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 4cfccd2..3ba56ea 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,9 @@ +# [9.1.0-alpha.1](https://github.com/ZeeCoder/use-resize-observer/compare/v9.0.2...v9.1.0-alpha.1) (2022-11-21) + +### Features + +- Exported some TS types ([e056e19](https://github.com/ZeeCoder/use-resize-observer/commit/e056e191499c713dc7bdd872530cfb9786e1af3e)), closes [#98](https://github.com/ZeeCoder/use-resize-observer/issues/98) + ## [9.0.2](https://github.com/ZeeCoder/use-resize-observer/compare/v9.0.1...v9.0.2) (2022-06-13) ### Bug Fixes diff --git a/package.json b/package.json index 30a3a8b..8eebd7b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "use-resize-observer", - "version": "9.0.2", + "version": "9.1.0-alpha.1", "main": "dist/bundle.cjs.js", "module": "dist/bundle.esm.js", "types": "dist/index.d.ts",