From 0998954bc65db01e810670c3d80770dc32637b63 Mon Sep 17 00:00:00 2001 From: Thinh Trinh Date: Sat, 30 Nov 2024 10:39:19 +0700 Subject: [PATCH 1/2] feat(use-debounce): release useDebounce --- .github/workflows/test.yml | 7 +++ apps/docs/package.json | 2 +- packages/components/CHANGELOG.md | 7 +++ packages/components/package.json | 3 +- packages/use-debounce/.eslintrc.js | 8 ++++ packages/use-debounce/CHANGELOG.md | 7 +++ packages/use-debounce/README.md | 32 +++++++++++++ packages/use-debounce/package.json | 46 +++++++++++++++++++ packages/use-debounce/src/index.ts | 1 + .../use-debounce/src/use-debounce.spec.tsx | 22 +++++++++ packages/use-debounce/src/use-debounce.tsx | 23 ++++++++++ packages/use-debounce/tsconfig.json | 8 ++++ 12 files changed, 164 insertions(+), 2 deletions(-) create mode 100644 packages/use-debounce/.eslintrc.js create mode 100644 packages/use-debounce/CHANGELOG.md create mode 100644 packages/use-debounce/README.md create mode 100644 packages/use-debounce/package.json create mode 100644 packages/use-debounce/src/index.ts create mode 100644 packages/use-debounce/src/use-debounce.spec.tsx create mode 100644 packages/use-debounce/src/use-debounce.tsx create mode 100644 packages/use-debounce/tsconfig.json diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml index 3f9bf89..2cfc1f0 100644 --- a/.github/workflows/test.yml +++ b/.github/workflows/test.yml @@ -92,3 +92,10 @@ jobs: token: ${{ secrets.CODECOV_TOKEN }} flags: Autosizer files: ./packages/autosizer/coverage/coverage-final.json + + - name: Upload `useDebounce` coverage reports to Codecov + uses: codecov/codecov-action@v3 + with: + token: ${{ secrets.CODECOV_TOKEN }} + flags: useDebounce + files: ./packages/use-debounce/coverage/coverage-final.json diff --git a/apps/docs/package.json b/apps/docs/package.json index 3ce37b2..f65bbee 100644 --- a/apps/docs/package.json +++ b/apps/docs/package.json @@ -10,7 +10,7 @@ "clean": "rimraf .turbo && rimraf node_modules && rimraf .next" }, "dependencies": { - "@react-awesome/components": "1.0.22", + "@react-awesome/components": "1.0.23", "@vercel/speed-insights": "^1.0.10", "classnames": "^2.5.1", "lodash": "^4.17.21", diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index e9506d5..31a0351 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -1,5 +1,12 @@ # @react-awesome/components +## 1.0.23 + +### Patch Changes + +- Updated dependencies + - @react-awesome/use-debounce@1.0.0 + ## 1.0.22 ### Patch Changes diff --git a/packages/components/package.json b/packages/components/package.json index 0e6217f..679947f 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -1,6 +1,6 @@ { "name": "@react-awesome/components", - "version": "1.0.22", + "version": "1.0.23", "main": "./dist/index.cjs", "module": "./dist/index.js", "types": "./dist/index.d.ts", @@ -46,6 +46,7 @@ "@react-awesome/use-previous": "0.0.3", "@react-awesome/use-toggle": "1.0.0", "@react-awesome/use-breakpoint": "1.0.0", + "@react-awesome/use-debounce": "1.0.0", "@react-awesome/autosizer": "0.0.0" } } diff --git a/packages/use-debounce/.eslintrc.js b/packages/use-debounce/.eslintrc.js new file mode 100644 index 0000000..19f3ed1 --- /dev/null +++ b/packages/use-debounce/.eslintrc.js @@ -0,0 +1,8 @@ +module.exports = { + root: true, + extends: ["@react-awesome/eslint-config/library.js"], + parser: "@typescript-eslint/parser", + parserOptions: { + project: true, + }, +}; diff --git a/packages/use-debounce/CHANGELOG.md b/packages/use-debounce/CHANGELOG.md new file mode 100644 index 0000000..8d69e2a --- /dev/null +++ b/packages/use-debounce/CHANGELOG.md @@ -0,0 +1,7 @@ +# @react-awesome/use-debounce + +## 1.0.0 + +### Major Changes + +- Release first version diff --git a/packages/use-debounce/README.md b/packages/use-debounce/README.md new file mode 100644 index 0000000..2c22c32 --- /dev/null +++ b/packages/use-debounce/README.md @@ -0,0 +1,32 @@ +# @react-awesome/use-debounce + +

+ version + coverage + license + build status + size +

+ +**use-debounce** tracks the previous value of a variable. + +Please refer to the [documentation](https://react-awesome-components.vercel.app/docs/use-debounce) for more information. + +## Installation + +```sh +yarn add @react-awesome/use-debounce +# or +npm i @react-awesome/use-debounce +``` + +## Contribution + +Yes please! See the +[contributing guidelines](https://github.com/trinhthinh388/react-awesome-components/blob/master/CONTRIBUTING.md) +for details. + +## Licence + +This project is licensed under the terms of the +[MIT license](https://github.com/trinhthinh388/react-awesome-components/blob/master/LICENSE). diff --git a/packages/use-debounce/package.json b/packages/use-debounce/package.json new file mode 100644 index 0000000..c522e13 --- /dev/null +++ b/packages/use-debounce/package.json @@ -0,0 +1,46 @@ +{ + "name": "@react-awesome/use-debounce", + "version": "1.0.0", + "main": "./dist/index.cjs", + "module": "./dist/index.js", + "types": "./dist/index.d.ts", + "sideEffects": false, + "license": "MIT", + "description": "useDebounce debounces the state value.", + "keywords": [ + "react", + "debounce", + "state", + "react", + "react", + "hooks", + "useDebounce" + ], + "repository": { + "url": "https://github.com/trinhthinh388/react-awesome-components" + }, + "files": [ + "dist/**" + ], + "scripts": { + "build": "vite --config ../../vite.config.ts build", + "dev": "vite --watch --config ../../vite.config.ts build", + "lint": "eslint \"src/**/*.ts*\"", + "clean": "rimraf .turbo && rimraf node_modules && rimraf dist", + "test": "vitest --config ../../vite.config.ts --coverage --run", + "test:ui": "vitest --config ../../vite.config.ts --coverage --ui", + "typecheck": "tsc --noEmit" + }, + "devDependencies": { + "@react-awesome/eslint-config": "*", + "@react-awesome/tsconfig": "*", + "@types/react": "^18.2.46", + "@types/react-dom": "^18.2.18", + "eslint": "^8.56.0", + "react": "^18.2.0", + "typescript": "^5.3.3" + }, + "publishConfig": { + "access": "public" + } +} diff --git a/packages/use-debounce/src/index.ts b/packages/use-debounce/src/index.ts new file mode 100644 index 0000000..62d69b1 --- /dev/null +++ b/packages/use-debounce/src/index.ts @@ -0,0 +1 @@ +export * from './use-debounce' \ No newline at end of file diff --git a/packages/use-debounce/src/use-debounce.spec.tsx b/packages/use-debounce/src/use-debounce.spec.tsx new file mode 100644 index 0000000..8facd64 --- /dev/null +++ b/packages/use-debounce/src/use-debounce.spec.tsx @@ -0,0 +1,22 @@ +import { useDebounce } from './use-debounce' +import { renderHook } from '@testing-library/react' + +describe('useDebounce', () => { + beforeEach(() => { + // tell vitest we use mocked time + vi.useFakeTimers() + }) + + afterEach(() => { + // restoring date after each test run + vi.useRealTimers() + }) + + it('Should debounce the state update', () => { + const { result, rerender } = renderHook(() => useDebounce(1, 3_000)) + expect(result.current).toBe(undefined) + vi.runAllTimers() + rerender() + expect(result.current).toBe(1) + }) +}) diff --git a/packages/use-debounce/src/use-debounce.tsx b/packages/use-debounce/src/use-debounce.tsx new file mode 100644 index 0000000..0271621 --- /dev/null +++ b/packages/use-debounce/src/use-debounce.tsx @@ -0,0 +1,23 @@ +import { useEffect, useRef, useState } from "react"; + +export function useDebounce(state: T, timeout: number = 3_00) : T { + const [debounced, setDebounced] = useState() + const timeoutId = useRef() + + useEffect(() => { + const id = timeoutId.current + if (id) { + clearTimeout(id) + } + + timeoutId.current = window.setTimeout(() => { + setDebounced(state) + }, timeout) + + return () => { + clearTimeout(id) + } + }, [state, timeout]) + + return debounced as T +} \ No newline at end of file diff --git a/packages/use-debounce/tsconfig.json b/packages/use-debounce/tsconfig.json new file mode 100644 index 0000000..a09969e --- /dev/null +++ b/packages/use-debounce/tsconfig.json @@ -0,0 +1,8 @@ +{ + "extends": "@react-awesome/tsconfig/react-library.json", + "compilerOptions": { + "types": ["vitest/globals"], + }, + "include": ["."], + "exclude": ["dist", "build", "node_modules"], +} From 3a54b734bec17ee2878e9e14bfdc50d1e2eeafa8 Mon Sep 17 00:00:00 2001 From: Thinh Trinh Date: Sat, 30 Nov 2024 10:40:59 +0700 Subject: [PATCH 2/2] fix(use-debounce): format --- packages/use-debounce/src/index.ts | 2 +- packages/use-debounce/src/use-debounce.tsx | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/use-debounce/src/index.ts b/packages/use-debounce/src/index.ts index 62d69b1..38ef774 100644 --- a/packages/use-debounce/src/index.ts +++ b/packages/use-debounce/src/index.ts @@ -1 +1 @@ -export * from './use-debounce' \ No newline at end of file +export * from './use-debounce' diff --git a/packages/use-debounce/src/use-debounce.tsx b/packages/use-debounce/src/use-debounce.tsx index 0271621..8a27f64 100644 --- a/packages/use-debounce/src/use-debounce.tsx +++ b/packages/use-debounce/src/use-debounce.tsx @@ -1,6 +1,6 @@ -import { useEffect, useRef, useState } from "react"; +import { useEffect, useRef, useState } from 'react' -export function useDebounce(state: T, timeout: number = 3_00) : T { +export function useDebounce(state: T, timeout: number = 3_00): T { const [debounced, setDebounced] = useState() const timeoutId = useRef() @@ -20,4 +20,4 @@ export function useDebounce(state: T, timeout: number = 3_00) : T { }, [state, timeout]) return debounced as T -} \ No newline at end of file +}