https://github.com/stagas/fluent-event

Fluent DOM event toolkit.
https://github.com/stagas/fluent-event

debounce dom event fluent queue raf

Last synced: about 2 months ago
JSON representation

Fluent DOM event toolkit.

• Host: GitHub
• URL: https://github.com/stagas/fluent-event
• Owner: stagas
• License: mit
• Created: 2022-03-14T23:29:54.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2022-04-16T16:14:11.000Z (almost 3 years ago)
• Last Synced: 2024-12-16T20:33:01.162Z (about 2 months ago)
• Topics: debounce, dom, event, fluent, queue, raf
• Language: TypeScript
• Homepage:
• Size: 37.1 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


fluent-event    





Fluent DOM event toolkit.





npm i fluent-event 


pnpm add fluent-event 

yarn add fluent-event

## API

  #  EventListener      src/event.ts#L3  
#  (this, event)        
    
    #  this        


T
        
#  event        


E
        
  


(this, event)   =>  

any

            #  Fn      src/types.ts#L1  


#  (args)        
    
    #  args        


P
        
  


(args)   =>  

R

    
        #  debounce()     – Decorate function fn with debounce delay ms.  src/debounce.ts#L22  
    
  



Flags: `first` => run `fn` first, then debounce

```ts

fn = (x: number) => console.log(x)

// => runs `fn` after 100ms following last call

cb = debounce()(fn, 100)

cb(1)

cb(2) // <- cb(2) wins, prints `2`

// => runs `fn` first then debounces until 100ms of inactivity

cb = debounce().first(fn, 100)

cb(1) // <- cb(1) wins, prints `1`

cb(2)

```



    
debounce()   =>  



Fluent<#  (args)        
    
    #  args        


any  []
        
  


(args)   =>  

any
    
, Flags<"first">>
    
#  event()     – Decorates event listener fn.  src/event.ts#L23  
    
  



Flags:

- `prevent` => `event.preventDefault()`

- `stop` => `event.stopPropagation()`

- `stop.immediate` => `event.stopImmediatePropagation()`

```ts

btn.onclick = event()(fn)

btn.onclick = event().prevent(fn)

btn.onclick = event().prevent.stop(fn)

btn.onclick = event().stop.immediate(fn)

```



    
event()   =>  



Fluent<#  (args)        
    
    #  args        


any  []
        
  


(args)   =>  

any
    
, Flags<"prevent" | "stop" | "immediate">>
    
#  off(el, type, listener, options)     – Removes an event listener of type type from el using options.  src/on.ts#L53  
    
    #  el        


T
        
#  type        


K
        
#  listener(ev)        
    
    #  ev        


HTMLElementEventMap  [K]
        
  


listener(ev)   =>  

any

    
#  options        


boolean | AddEventListenerOptions
        
  
off<T extends      HTMLElement, K>(el, type, listener, options)   =>  
void
    #  on()     – Adds a DOM event listener to an event type using options and returns its remover.  src/on.ts#L40  
    
  



Flags: `active` | `capture` | `once` | `passive`

```ts

on()(btn, 'click', fn)

on().once(btn, 'click', fn)

on().passive(div, 'wheel', fn)

const off = on().passive.capture(btn, 'wheel', fn)

// ...later...

off() // remove listener

```



    
on()   =>  



Fluent<#  (args)        
    
    #  args        


any  []
        
  


(args)   =>  

any
    
, Flags<"active" | "capture" | "once" | "passive">>
    
#  queue()     – Queue.  src/queue.ts#L48  
    
  



All queue functions are also throttled to once per invocation.

```ts

// decorate function with `requestAnimationFrame`

const cbWithRaf = queue().raf(cb)

// decorate function with `setTimeout`

const cbWithTimeout = queue().time(cb)

// decorate function with `queueMicrotask`

const cbWithMicrotask = queue().task(cb)

```



    
queue()   =>  

{
  #  raf   =   ...      
#  (fn)        
    
    #  fn        


Fn<P, any>
        
  


<P>(fn)   =>  



Fn<P, void>

    

        #  task   =   ...      


#  (fn)        
    
    #  fn        


Fn<P, any>
        
  


<P>(fn)   =>  



Fn<P, void>

    
        #  time   =   ...      


#  (fn)        
    
    #  fn        


Fn<P, any>
        
  


<P>(fn)   =>  



Fn<P, void>

    
        }    


## Credits

- [fluent-flags](https://npmjs.org/package/fluent-flags) by [stagas](https://github.com/stagas) – Decorates a function with arbitrary fluent boolean flags and passes them as the first parameter.

## Contributing

[Fork](https://github.com/stagas/fluent-event/fork) or [edit](https://github.dev/stagas/fluent-event) and submit a PR.

All contributions are welcome!

## License

MIT © 2022 [stagas](https://github.com/stagas)