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

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()

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

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.

// 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 by stagas – Decorates a function with arbitrary fluent boolean flags and passes them as the first parameter.

Contributing

Fork or edit and submit a PR.

All contributions are welcome!

License

MIT © 2022 stagas