ts-dom-fns

TypeScript DOM Helper Functions

Why?

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.

Installation

λ npm i @rpearce/ts-dom-fns

or

λ yarn add @rpearce/ts-dom-fns

The Helper Functions

• 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

Usage

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)