Merge pull request #8 from github/feat-add-support-for-typescript-decorators

Add support for typescript decorators

Author: keithamus

README.md

@@ -53,3 +53,21 @@ await delay(100)
 | throttle(fn, 100, {once: true, start: false})|   2                  |
 | debounce(fn, 100)                            |                   10 |
 ```
+
+### TypeScript Decorators Support!
+
+This package also includes a decorator module which can be used to provide [TypeScript Decorator](https://www.typescriptlang.org/docs/handbook/decorators.html#decorators) annotations to functions.
+
+Here's an example, showing what you need to do:
+
+```typescript
+import {throttle} from '@github/mini-throttle/decorators'
+//                                           ^ note: add `/decorators` to the import to get decorators
+
+class MyClass {
+  @throttle(100, { start: false }) // <- Just like normal throttle, but you omit the callback argument
+  doThings() {
+    // `MyClass.prototype.doThings` will be throttled!
+  }
+}
+```

decorators.ts

@@ -0,0 +1,23 @@
+import {debounce as db, throttle as th, ThrottleOptions} from './index'
+
+export function throttle(wait = 0, opts: ThrottleOptions = {}) {
+  return (proto: unknown, name: string, descriptor: PropertyDescriptor) => {
+    if (!descriptor || typeof descriptor.value !== 'function') {
+      throw new Error('debounce can only decorate functions')
+    }
+    const fn = descriptor.value
+    descriptor.value = th(fn, wait, opts)
+    Object.defineProperty(proto, name, descriptor)
+  }
+}
+
+export function debounce(wait = 0, opts: ThrottleOptions = {}) {
+  return (proto: unknown, name: string, descriptor: PropertyDescriptor) => {
+    if (!descriptor || typeof descriptor.value !== 'function') {
+      throw new Error('debounce can only decorate functions')
+    }
+    const fn = descriptor.value
+    descriptor.value = db(fn, wait, opts)
+    Object.defineProperty(proto, name, descriptor)
+  }
+}

decorators/package.json

@@ -0,0 +1,4 @@
+{
+  "main": "../dist/umd/decorators.js",
+  "module": "../dist/decorators.js"
+}

index.d.ts

@@ -1,34 +1,45 @@
-/* @flow strict */
-
-type ThrottleOptions = {|
-  start?: boolean,
-  middle?: boolean,
+export interface ThrottleOptions {
+  /**
+   * Fire immediately on the first call.
+   */
+  start?: boolean
+  /**
+   * Fire as soon as `wait` has passed.
+   */
+  middle?: boolean
+  /**
+   * Cancel after the first successful call.
+   */
   once?: boolean
-|}
-export function throttle<T: $ReadOnlyArray<mixed>>(
-  callback: (...T) => mixed,
-  wait: number = 0,
+}
+
+interface Throttler<T extends unknown[]> {
+  (...args: T): void
+  cancel(): void
+}
+
+export function throttle<T extends unknown[]>(
+  callback: (...args: T) => unknown,
+  wait = 0,
   {start = true, middle = true, once = false}: ThrottleOptions = {}
-): (...T) => void {
+): Throttler<T> {
   let last = 0
-  let timer
+  let timer: number | undefined
   let cancelled = false
-  const fn = (...args) => {
+  function fn(this: unknown, ...args: T) {
     if (cancelled) return
     const delta = Date.now() - last
     last = Date.now()
     if (start) {
-      //eslint-disable-next-line flowtype/no-flow-fix-me-comments
-      // $FlowFixMe this isn't a const
       start = false
-      callback(...args)
+      callback.apply(this, args)
       if (once) fn.cancel()
     } else if ((middle && delta < wait) || !middle) {
       clearTimeout(timer)
       timer = setTimeout(
         () => {
           last = Date.now()
-          callback(...args)
+          callback.apply(this, args)
           if (once) fn.cancel()
         },
         !middle ? wait : wait - delta
@@ -42,10 +53,10 @@ export function throttle<T: $ReadOnlyArray<mixed>>(
   return fn
 }
 
-export function debounce<T: $ReadOnlyArray<mixed>>(
-  callback: (...T) => mixed,
-  wait: number = 0,
+export function debounce<T extends unknown[]>(
+  callback: (...args: T) => unknown,
+  wait = 0,
   {start = false, middle = false, once = false}: ThrottleOptions = {}
-): (...T) => void {
+): Throttler<T> {
   return throttle(callback, wait, {start, middle, once})
 }