Skip to content

Commit

Permalink
Add rescript-use-debounce (#44)
Browse files Browse the repository at this point in the history
* Add use-debounce binding
* version packages
  • Loading branch information
Jaeho Lee authored Feb 13, 2023
1 parent bc7bd39 commit 2e19a84
Show file tree
Hide file tree
Showing 6 changed files with 171 additions and 0 deletions.
5 changes: 5 additions & 0 deletions .changeset/curly-starfishes-walk.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@greenlabs/rescript-use-debounce": patch
---

add rescript-use-debounce
21 changes: 21 additions & 0 deletions packages/rescript-use-debounce/.npmignore
Original file line number Diff line number Diff line change
@@ -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
33 changes: 33 additions & 0 deletions packages/rescript-use-debounce/README.md
Original file line number Diff line number Diff line change
@@ -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<callback>`, but couldn't find a way to achieve it in ReScript so left the return type as unit.
20 changes: 20 additions & 0 deletions packages/rescript-use-debounce/bsconfig.json
Original file line number Diff line number Diff line change
@@ -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": []
}
29 changes: 29 additions & 0 deletions packages/rescript-use-debounce/package.json
Original file line number Diff line number Diff line change
@@ -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 <developer@greenlabs.co.kr>",
"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": {}
}
63 changes: 63 additions & 0 deletions packages/rescript-use-debounce/src/UseDebounce.res
Original file line number Diff line number Diff line change
@@ -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<callback>`, 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})
<input onClick={debouncedCallback} />
````
*/
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))
}

0 comments on commit 2e19a84

Please sign in to comment.