From bc407db714c90ddc3faf306398612992a2b8bcd1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mois=C3=A9s=20Machuca=20Valverde?= Date: Sat, 3 Aug 2024 20:55:13 -0500 Subject: [PATCH] feat: separating dependencies (#105) Remove dependencies on useWindowSize, useScrollPosition, and useClipboard. --- .changeset/six-students-run.md | 5 +++ .changeset/tasty-boats-tease.md | 6 ++++ packages/hooks/use-clipboard/package.json | 3 +- packages/hooks/use-clipboard/src/index.ts | 13 +++++--- .../hooks/use-scroll-position/package.json | 3 +- .../hooks/use-scroll-position/src/index.ts | 32 ++++++++----------- .../use-scroll-position/tests/index.test.ts | 14 ++++++-- packages/hooks/use-window-size/package.json | 3 +- packages/hooks/use-window-size/src/index.ts | 6 ++-- pnpm-lock.yaml | 9 ------ 10 files changed, 51 insertions(+), 43 deletions(-) create mode 100644 .changeset/six-students-run.md create mode 100644 .changeset/tasty-boats-tease.md diff --git a/.changeset/six-students-run.md b/.changeset/six-students-run.md new file mode 100644 index 0000000..08bb74e --- /dev/null +++ b/.changeset/six-students-run.md @@ -0,0 +1,5 @@ +--- +'@raddix/use-clipboard': minor +--- + +Remove @raddix/use-timeout of peerDependecies diff --git a/.changeset/tasty-boats-tease.md b/.changeset/tasty-boats-tease.md new file mode 100644 index 0000000..03e7601 --- /dev/null +++ b/.changeset/tasty-boats-tease.md @@ -0,0 +1,6 @@ +--- +'@raddix/use-scroll-position': minor +'@raddix/use-window-size': minor +--- + +Remove @raddix/use-event-listener of peerDependencies diff --git a/packages/hooks/use-clipboard/package.json b/packages/hooks/use-clipboard/package.json index 738614e..b811b7c 100644 --- a/packages/hooks/use-clipboard/package.json +++ b/packages/hooks/use-clipboard/package.json @@ -33,8 +33,7 @@ ], "peerDependencies": { "react": ">=16.8.0", - "react-dom": ">=16.8.0", - "@raddix/use-timeout": "workspace:*" + "react-dom": ">=16.8.0" }, "clean-package": "../../../clean-package.config.json", "tsup": { diff --git a/packages/hooks/use-clipboard/src/index.ts b/packages/hooks/use-clipboard/src/index.ts index e83573a..08113d5 100644 --- a/packages/hooks/use-clipboard/src/index.ts +++ b/packages/hooks/use-clipboard/src/index.ts @@ -1,5 +1,4 @@ -import { useTimeout } from '@raddix/use-timeout'; -import { useState } from 'react'; +import { useEffect, useRef, useState } from 'react'; export type UseClipboard = (options?: { timeout?: number; @@ -10,7 +9,7 @@ export type UseClipboard = (options?: { export const useClipboard: UseClipboard = (options = {}) => { const { timeout = 2000, onError, onSuccess } = options; const [isCopied, setIsCopied] = useState(false); - const { run } = useTimeout(() => setIsCopied(false), timeout, false); + const idTimeout = useRef(null); const copy = (data: string) => { if ('clipboard' in navigator) { @@ -19,7 +18,7 @@ export const useClipboard: UseClipboard = (options = {}) => { .then(() => { setIsCopied(true); onSuccess?.(); - run(); + idTimeout.current = setTimeout(() => setIsCopied(false), timeout); }) .catch(err => onError?.(err)); } else { @@ -27,5 +26,11 @@ export const useClipboard: UseClipboard = (options = {}) => { } }; + useEffect(() => { + return () => { + if (idTimeout.current) clearTimeout(idTimeout.current); + }; + }, []); + return [isCopied, copy]; }; diff --git a/packages/hooks/use-scroll-position/package.json b/packages/hooks/use-scroll-position/package.json index a08fe52..894e2a5 100644 --- a/packages/hooks/use-scroll-position/package.json +++ b/packages/hooks/use-scroll-position/package.json @@ -32,8 +32,7 @@ ], "peerDependencies": { "react": ">=16.8.0", - "react-dom": ">=16.8.0", - "@raddix/use-event-listener": "workspace:*" + "react-dom": ">=16.8.0" }, "clean-package": "../../../clean-package.config.json", "tsup": { diff --git a/packages/hooks/use-scroll-position/src/index.ts b/packages/hooks/use-scroll-position/src/index.ts index e8a8928..1ea6d94 100644 --- a/packages/hooks/use-scroll-position/src/index.ts +++ b/packages/hooks/use-scroll-position/src/index.ts @@ -1,39 +1,35 @@ import { type RefObject, useEffect, useState } from 'react'; -import { useEventListener } from '@raddix/use-event-listener'; export interface ScrollPosition { x: number | null; y: number | null; } -export interface Options { - target?: RefObject | Document; +interface Options { + target?: RefObject; } -export const useScrollPosition = ({ - target = globalThis.document -}: Options = {}): ScrollPosition => { +export const useScrollPosition = ({ target }: Options = {}): ScrollPosition => { const [scrollPosition, setScrollPosition] = useState({ x: 0, y: 0 }); - const handle = () => { - const targetElement = - target instanceof Document ? document.documentElement : target.current; - - setScrollPosition({ - x: targetElement?.scrollLeft ?? null, - y: targetElement?.scrollTop ?? null - }); - }; - useEffect(() => { + const element = target ? target.current : window; + + const handle = () => { + setScrollPosition({ + x: (target ? target.current?.scrollLeft : window.scrollX) ?? null, + y: (target ? target.current?.scrollTop : window.scrollY) ?? null + }); + }; handle(); + + element?.addEventListener('scroll', handle, { passive: true }); + return () => element?.removeEventListener('scroll', handle); // eslint-disable-next-line react-hooks/exhaustive-deps }, []); - useEventListener('scroll', handle, { target, passive: true }); - return scrollPosition; }; diff --git a/packages/hooks/use-scroll-position/tests/index.test.ts b/packages/hooks/use-scroll-position/tests/index.test.ts index 8ca1d7a..cf27729 100644 --- a/packages/hooks/use-scroll-position/tests/index.test.ts +++ b/packages/hooks/use-scroll-position/tests/index.test.ts @@ -42,9 +42,17 @@ describe('useScrollPosition test:', () => { expect(result.current).toEqual({ x: 0, y: 0 }); act(() => { - document.documentElement.scrollTop = 100; - document.documentElement.scrollLeft = 50; - document.dispatchEvent(new Event('scroll')); + Object.defineProperty(window, 'scrollY', { + value: 100, + configurable: true + }); + + Object.defineProperty(window, 'scrollX', { + value: 50, + configurable: true + }); + + window.dispatchEvent(new Event('scroll')); }); expect(result.current).toEqual({ x: 50, y: 100 }); diff --git a/packages/hooks/use-window-size/package.json b/packages/hooks/use-window-size/package.json index ec2f7ba..072738f 100644 --- a/packages/hooks/use-window-size/package.json +++ b/packages/hooks/use-window-size/package.json @@ -32,8 +32,7 @@ ], "peerDependencies": { "react": ">=16.8.0", - "react-dom": ">=16.8.0", - "@raddix/use-event-listener": "workspace:*" + "react-dom": ">=16.8.0" }, "clean-package": "../../../clean-package.config.json", "tsup": { diff --git a/packages/hooks/use-window-size/src/index.ts b/packages/hooks/use-window-size/src/index.ts index 4128253..8347a93 100644 --- a/packages/hooks/use-window-size/src/index.ts +++ b/packages/hooks/use-window-size/src/index.ts @@ -1,5 +1,4 @@ import { useEffect, useState } from 'react'; -import { useEventListener } from '@raddix/use-event-listener'; interface Size { width: number; @@ -21,9 +20,10 @@ export const useWindowSize = (): Size => { useEffect(() => { handleResize(); - }, []); + window.addEventListener('resize', handleResize); - useEventListener('resize', handleResize); + return () => window.removeEventListener('resize', handleResize); + }, []); return windowSize; }; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3998fff..fe2335d 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -237,9 +237,6 @@ importers: packages/hooks/use-clipboard: dependencies: - '@raddix/use-timeout': - specifier: workspace:* - version: link:../use-timeout react: specifier: '>=16.8.0' version: 18.2.0 @@ -369,9 +366,6 @@ importers: packages/hooks/use-scroll-position: dependencies: - '@raddix/use-event-listener': - specifier: workspace:* - version: link:../use-event-listener react: specifier: '>=16.8.0' version: 18.2.0 @@ -423,9 +417,6 @@ importers: packages/hooks/use-window-size: dependencies: - '@raddix/use-event-listener': - specifier: workspace:* - version: link:../use-event-listener react: specifier: '>=16.8.0' version: 18.2.0