TypeScript DOM Helper Functions
JS object properties are not minified/mangled by default (and should not be)
with tools like terser, so your JS bundles can have
multiple appearances of DOM methods like .addEventListener, .parentNode,
.focus, .appendChild, and more, and this can needlessly increase your bundle
sizes. On the other hand, variables and functions are reduced to names like a,
b, and ab, and this can greatly reduce the size of your web page.
With this little library, we leverage the ability for variables and functions to
be mangled by wrapping common DOM methods and properties in functions so that we
only have methods like .addEventListener show up once in our bundled JS
output.
Also of note is that the functions' arguments are ordered from least likely to
change to most likely to change ("functional style") so that you can partially
apply arguments to functions via something like .bind() and get greater code
reuse. There are very few objects accepted in order to keep build sizes as small
as possible.
λ npm i @rpearce/ts-dom-fnsor
λ yarn add @rpearce/ts-dom-fns- addEventListener
- appendChild
- blur
- cloneElement
- createElement
- focus
- forEachSibling
- getAttribute
- getBoundingClientRect
- getComputedStyle
- getNaturalHeight
- getNaturalWidth
- getNextSibling
- getOffsetHeight
- getOffsetWidth
- getParentNode
- getPreviousSibling
- getScaleToWindow
- getScaleToWindowMax
- getStyle
- getStyleProperty
- getWindowInnerHeight
- getWindowInnerWidth
- getWindowPageXOffset
- getWindowPageYOffset
- insertAdjacentElement
- isEscapeKey
- raf
- removeAttribute
- removeChild
- removeDataAttributes
- removeEventListener
- replaceChild
- setAttribute
- setInnerHTML
- setInnerText
- setStyleProperty
- setTimeout
- stopPropagation
Use only the functions you want to, and the rest should get tree-shaken out by your build tool.
import { addEventListener, removeEventListener } from '@rpearce/ts-dom-fns'
// ...
const CLICK = 'click'
const cb = (e) => { console.log('Clicked!', e) }
addEventListener(CLICK, cb, document)
// ...
removeEventListener(CLICK, cb, document)