awesome-debounce-promise - npm Package Compare versions

Comparing version 0.0.2 to 1.0.0

awesome-debounce-promise.js

		@@ -91,3 +91,6 @@ 'use strict';
		var DefaultOptions = {
		// By default, the key is null, which means that all the function calls will share the same debounced function
		// By default, the key is null, which means that all the function calls
		// will share the same debounced function
		// Providing a key function permit to use the call arguments
		// and route to a distinct debounced function
		key: function key() {
		@@ -97,4 +100,6 @@ return null;

		// By default, a debounced function will only resolve the last promise it returned
		// Former calls will stay unresolved, so that you don't have to handle concurrency issues in your code
		// By default, a debounced function will only resolve
		// the last promise it returned
		// Former calls will stay unresolved, so that you don't have
		// to handle concurrency issues in your code
		onlyResolvesLast: true
		@@ -101,0 +106,0 @@ };

index.js

		@@ -63,7 +63,12 @@ import DebouncePromise from 'debounce-promise';
		const DefaultOptions = {
		// By default, the key is null, which means that all the function calls will share the same debounced function
		// By default, the key is null, which means that all the function calls
		// will share the same debounced function
		// Providing a key function permit to use the call arguments
		// and route to a distinct debounced function
		key: () => null,

		// By default, a debounced function will only resolve the last promise it returned
		// Former calls will stay unresolved, so that you don't have to handle concurrency issues in your code
		// By default, a debounced function will only resolve
		// the last promise it returned
		// Former calls will stay unresolved, so that you don't have
		// to handle concurrency issues in your code
		onlyResolvesLast: true,
		@@ -70,0 +75,0 @@ };

package.json

		{
		"name": "awesome-debounce-promise",
		"version": "0.0.2",
		"version": "1.0.0",
		"description": "Debounce your async calls",
		@@ -5,0 +5,0 @@ "main": "awesome-debounce-promise.js",

119

README.md

		@@ -1,14 +0,27 @@
		Awesome Debounce Promise
		==========================
		# Awesome Debounce Promise

		Debounce your async calls with React in mind
		Debounce your async calls with React in mind.

		Forget about these annoying issues:
		Forget about:

		- promises after unmount
		- handle concurrency issues
		- leaving promise land for callback hell with lodash/underscore
		- concurrency issues when promise resolves in "unexpected" order
		- leaving promise land for callback hell of Lodash / Underscore

		From the author of [this famous SO question](https://stackoverflow.com/a/28046731/82609) about debouncing with React.

		# Install

		`yarn add awesome-debounce-promise`

		`npm install awesome-debounce-promise --save`


		```jsx harmony
		import AwesomeDebouncePromise from 'awesome-debounce-promise';

		const asyncFunction = () => fetch("/api");

		const asyncFunctionDebounced = AwesomeDebouncePromise(asyncFunction, 500, options)
		```

		# Usecases
		@@ -18,19 +31,95 @@

		```jsx harmony
		const searchAPI = text => fetch('/search?text=' + encodeURIComponent(text));

		const searchAPIDebounced = AwesomeDebouncePromise(searchAPI, 500);

		class SearchInputAndResults extends React.Component {
		state = {
		text: '',
		results: null,
		};

		class SearchBox extends React.Component {
		constructor(props) {
		super(props);
		this.method = debounce(this.method,1000);
		}
		method() { ... }
		handleTextChange = async text => {
		this.setState({ text, results: null });
		const result = await searchAPIDebounced(text);
		this.setState({ result });
		};

		compponentWillUnmount() {
		this.setState = () => {};
		}
		}
		```

		When calling `debouncedSearchAPI`:

		- Debouncing search input / autocomplete results
		- Debouncing background saving of a text input
		- it will debounce the api calls. The API will only be called when user stops typing
		- each call will return a promise
		- only the promise returned by the last call will resolve, which will prevent the concurrency issues
		- there will be at most a single `this.setState({ result });` call per api call

		## Debouncing the background saving of some form items

		```jsx harmony
		const saveFieldValue = (fieldId, fieldValue) =>
		fetch('/saveField', {
		method: 'PUT',
		body: JSON.stringify({ fieldId, fieldValue }),
		});

		const saveFieldValueDebounced = AwesomeDebouncePromise(
		saveFieldValue,
		500,
		// Use a key to create distinct debouncing functions per field
		{ key: (fieldId, text) => fieldId },
		);

		class SearchInputAndResults extends React.Component {
		state = {
		value1: '',
		value2: '',
		};

		onFieldTextChange = async (fieldId, fieldValue) => {
		this.setState({ [fieldId]: fieldValue });
		await saveFieldValueDebounced(fieldId, fieldValue);
		};

		render() {
		const { value1, value2 } = this.state;
		return (
		<form>
		<input
		value={value1}
		onChange={e => onFieldTextChange(1, e.target.value)}
		/>
		<input
		value={value2}
		onChange={e => onFieldTextChange(2, e.target.value)}
		/>
		</form>
		);
		}
		}
		```

		# Options

		```jsx harmony
		const DefaultOptions = {
		// By default, the key is null, which means that all the function calls
		// will share the same debounced function
		// Providing a key function permit to use the call arguments
		// and route to a distinct debounced function
		key: () => null,

		// By default, a debounced function will only resolve
		// the last promise it returned
		// Former calls will stay unresolved, so that you don't have
		// to handle concurrency issues in your code
		onlyResolvesLast: true,
		};
		```

		Other debouncing options are available and provided by an external low-level library: [debounce-promise](https://github.com/bjoerge/debounce-promise)

awesome-debounce-promise - npm Package Compare versions

Fixed alerts

Improved metrics