From 2e19a84021b4ca444376946096efee3cd43246dc Mon Sep 17 00:00:00 2001 From: Jaeho Lee Date: Mon, 13 Feb 2023 20:19:22 +0900 Subject: [PATCH] Add rescript-use-debounce (#44) * Add use-debounce binding * version packages --- .changeset/curly-starfishes-walk.md | 5 ++ packages/rescript-use-debounce/.npmignore | 21 +++++++ packages/rescript-use-debounce/README.md | 33 ++++++++++ packages/rescript-use-debounce/bsconfig.json | 20 ++++++ packages/rescript-use-debounce/package.json | 29 +++++++++ .../rescript-use-debounce/src/UseDebounce.res | 63 +++++++++++++++++++ 6 files changed, 171 insertions(+) create mode 100644 .changeset/curly-starfishes-walk.md create mode 100644 packages/rescript-use-debounce/.npmignore create mode 100644 packages/rescript-use-debounce/README.md create mode 100644 packages/rescript-use-debounce/bsconfig.json create mode 100644 packages/rescript-use-debounce/package.json create mode 100644 packages/rescript-use-debounce/src/UseDebounce.res diff --git a/.changeset/curly-starfishes-walk.md b/.changeset/curly-starfishes-walk.md new file mode 100644 index 0000000..753f0d5 --- /dev/null +++ b/.changeset/curly-starfishes-walk.md @@ -0,0 +1,5 @@ +--- +"@greenlabs/rescript-use-debounce": patch +--- + +add rescript-use-debounce diff --git a/packages/rescript-use-debounce/.npmignore b/packages/rescript-use-debounce/.npmignore new file mode 100644 index 0000000..3685e12 --- /dev/null +++ b/packages/rescript-use-debounce/.npmignore @@ -0,0 +1,21 @@ +**/__tests__/** +.bsb.lock +*.bs.js +.gitattributes +.github/ +.graphql_ppx_cache/ +.merlin +.vscode/ +assets/ +CONTRIBUTING.md +CODE_OF_CONDUCT.md +documentation/ +documentationWebsite/ +docs/ +EXAMPLES/ +lib/ +node_modules/ +package-lock.json +TODO +yarn.lock +yarn-error.log \ No newline at end of file diff --git a/packages/rescript-use-debounce/README.md b/packages/rescript-use-debounce/README.md new file mode 100644 index 0000000..7ecf98b --- /dev/null +++ b/packages/rescript-use-debounce/README.md @@ -0,0 +1,33 @@ +# `rescript-use-debounce` + +Binding of [`use-debounce`](https://github.com/xnimorz/use-debounce) package + +## Install + +```bash +npm i @greenlabs/rescript-use-debounce +or +yarn add @greenlabs/rescript-use-debounce +``` + +```json +"bs-dependencies": [ + "@greenlabs/rescript-use-debounce" +] +``` + +## Usage + +```rescript +let test = () => { + let (debouncedCallback, debouncedCallbackMethods) = useDebouncedCallback(e => { + e->ReactEvent.Synthetic.preventDefault + }, 500, ~options={maxWait: 500}) + + (debouncedCallback, debouncedCallbackMethods.isPending()) +} +``` + +## Note + +`flush()`'s type signature is `unit => ReturnType`, but couldn't find a way to achieve it in ReScript so left the return type as unit. diff --git a/packages/rescript-use-debounce/bsconfig.json b/packages/rescript-use-debounce/bsconfig.json new file mode 100644 index 0000000..2bdd868 --- /dev/null +++ b/packages/rescript-use-debounce/bsconfig.json @@ -0,0 +1,20 @@ +{ + "name": "@greenlabs/rescript-use-debounce", + "reason": { "react-jsx": 3 }, + "package-specs": { + "module": "es6", + "in-source": true + }, + "suffix": ".bs.js", + "sources": [ + { + "dir": "./src", + "subdirs": false + } + ], + "bsc-flags": ["-bs-no-version-header"], + "warnings": { + "error": true + }, + "bs-dependencies": [] +} diff --git a/packages/rescript-use-debounce/package.json b/packages/rescript-use-debounce/package.json new file mode 100644 index 0000000..5694121 --- /dev/null +++ b/packages/rescript-use-debounce/package.json @@ -0,0 +1,29 @@ +{ + "name": "@greenlabs/rescript-use-debounce", + "description": "ReScript bindings for rescript-use-debounce", + "version": "0.0.0", + "license": "MIT", + "author": "Greenlabs Dev ", + "scripts": { + "start": "rescript build -w", + "build": "rescript build -with-deps" + }, + "keywords": [ + "ReScript", + "rescript-use-debounce" + ], + "publishConfig": { + "access": "public" + }, + "bugs": "https://github.com/green-labs/rescript-bindings/issues", + "repository": { + "type": "git", + "url": "https://github.com/green-labs/rescript-bindings.git", + "directory": "packages/rescript-use-debounce" + }, + "dependencies": { + "use-debounce": "^9.0.3" + }, + "devDependencies": {}, + "peerDependencies": {} +} diff --git a/packages/rescript-use-debounce/src/UseDebounce.res b/packages/rescript-use-debounce/src/UseDebounce.res new file mode 100644 index 0000000..3ce9197 --- /dev/null +++ b/packages/rescript-use-debounce/src/UseDebounce.res @@ -0,0 +1,63 @@ +type debounceOptions<'a> = { + maxWait?: int, + leading?: bool, + trailing?: bool, + equalityFn?: (. 'a, 'a) => bool, +} + +type debouncedReturn<'a> = {@as("0") value: 'a} // TODO: add second position + +/** +```rescript +let debounced = useDebounce(someValue, 500) +debounced.value->Js.log +```` +*/ +@module("use-debounce") +external useDebounce: ('a, int) => debouncedReturn<'a> = "useDebounce" + +@module("use-debounce") +external useDebounceWithOptions: ('a, int, debounceOptions<'a>) => debouncedReturn<'a> = + "useDebounce" + +type debounceCallbackOptions = { + maxWait?: int, + leading?: bool, + trailing?: bool, +} + +@module("use-debounce") +external useDebouncedCallbackOriginal: ('a, int, ~options: debounceCallbackOptions=?) => 'a = + "useDebouncedCallback" + +// FIXME: flush()'s type signature is `unit => ReturnType`, but couldn't find a way +// to achieve it in ReScript so left the return type as unit. +type methods = {cancel: unit => unit, isPending: unit => int, flush: unit => unit} +%%private(external getMethods: 'a => methods = "%identity") + +/** +```rescript +let (debouncedCallback, _debouncedCallbackMethods) = useDebouncedCallback(e => { + e->ReactEvent.Synthetic.preventDefault +}, 500, ~options={maxWait: 500}) + +```` +*/ +let useDebouncedCallback = (callback, timeout, ~options) => { + let deboucedCallback = useDebouncedCallbackOriginal(callback, timeout, ~options) + (deboucedCallback, getMethods(deboucedCallback)) +} + +type throttleCallbackOptions = { + leading?: bool, + trailing?: bool, +} + +@module("use-debounce") +external useThrottledCallbackOriginal: ('a, int, ~options: throttleCallbackOptions=?) => 'a = + "useThrottledCallback" + +let useThrottledCallback = (callback, timeout, ~options) => { + let throttledCallback = useThrottledCallbackOriginal(callback, timeout, ~options) + (throttledCallback, getMethods(throttledCallback)) +}