lambda-dom

Functions for browser development that help with programming web projects in a functional style.

This package aims to provide some convenient, practical helpers for DOM manipulation and interaction, querying elements and implementing safe continuation patterns to facilitate a slightly more functional programming style in vanilla web projects.

Many functions are curried, the Sanctuary JS way, but not all of them. There are also some functions that take rest parameters: (...args). It just depends on the situation.

Quick links

• npm
• Github
• Changelog
• JSFiddle
• jsDelivr

Installation & usage

npm

Install the package with npm:

npm install --save lambda-dom

All functions are exported from one index file. Import the functions you want to use:

import { deferFrames, getMeta, touchAll, ... } from 'lambda-dom'

cdn

Alternatively you can grab the UMD bundle from a CDN like jsDelivr to get started quickly:

<!-- VERSIONED (safe) -->
<!-- Minified - Extended URL has sourcemaps support -->
<script src="https://cdn.jsdelivr.net/npm/lambda-dom@2.0.2"></script>
<script src="https://cdn.jsdelivr.net/npm/lambda-dom@2.0.2/umd/lambda-dom.min.js"></script>

<!-- Non-minified -->
<script src="https://cdn.jsdelivr.net/npm/lambda-dom@2.0.2/umd/lambda-dom.js"></script>

<!-- LATEST (risky in terms of potential breaking changes) -->
<!-- Minified - Extended URL version has sourcemaps support -->
<script src="https://cdn.jsdelivr.net/npm/lambda-dom"></script>
<script src="https://cdn.jsdelivr.net/npm/lambda-dom/umd/lambda-dom.min.js"></script>

<!-- Non-minified -->
<script src="https://cdn.jsdelivr.net/npm/lambda-dom/umd/lambda-dom.js"></script>

Here's a jsfiddle that includes the bundle from jsDelivr. The bundle exposes the global variable LD that contains all the functions:

<script>
    LD.deferFrames(100, function() {
        console.log('100 animation frames later...');
    });
</script>

Contributing

If you have suggestions how to improve this package, or want to contribute by adding new useful functions you're absolutely welcome to do so. File an issue, or even better, submit a PR. If you like this package and think it is useful please leave a star on Github 😃

Development and testing

Install (This package requires yarn v1 for dependency management) - To get started, clone the repository and install the dependencies. If you don't have yarn installed you can use npx to install:

npx yarn

Build - There are 3 builds for the package: ES modules, CommonJS modules, and UMD bundles. The package can be built with:

npm run build

Testing - The test suite is built with Jest and run with ts-jest, and can be run with:

npm run test

License

The MIT License (MIT). See license file for more information.