ƒlightDom, short for functional light DOM, is a functional API to work with the DOM.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs
src
.editorconfig
.eslintrc first commit 🎉 Oct 7, 2018
.gitignore 📖 commit docs for github pages Oct 20, 2018
LICENCE.md first commit 🎉 Oct 7, 2018
README.md
package-lock.json 1.3.1 Feb 20, 2019
package.json 1.3.1 Feb 20, 2019
rollup.config.js

README.md

ƒlightDom

ƒlightDom, short for functional light DOM, is a super lightweight functional API to work with the DOM.

Why use it?

Let's admit it, we've dropped jQuery but we sometimes miss it. DOM's native API is very verbose and cumbersome to work with.

Moreover, it doesn't play nice with functional programming. That's exactly what this library aims at: providing a light and functional way to work with the DOM.

ƒlightDom works really well with Ramda. But fear not, there's no need to be a functional programmer to enjoy its ease of use. And let's face it, it's more about convenience than pure functional programming, we're mutating the DOM.

Super simple

See for yourself:

import { find, findAll, addClass, onAll } from 'flightdom';

const lightbox = find('.lightbox');
addClass(lightbox, 'active');

// even more powerful
const lightboxes = findAll('.lightbox');
onAll(lightboxes, 'click', (e) => addClass(e.target, 'active'));

See, it's super easy and straightforward. There's absolutely no functional shenanigans involved. Now, for a second, just picture yourself doing the same thing with the native DOM API… Yes, long and painful.

And yet super powerful

Now if you insist, here's how wonderful it can get with some of Ramda's magic. Let's say we're building a function to manage some tabbed navigation:

import partialRight from 'ramda/es/partialRight';
import unary from 'ramda/es/unary';
import { find, addClass, removeClass, onAll } from 'flightdom';

/**
 * Init tabs
 * @param { NodeList } panelTabs
 * @param { NodeList } panels
 */
function initTabs(panelTabs, panels) {
    const addActive = unary(partialRight(addClass, ['active']));
    const removeActive = unary(partialRight(removeClass, ['active']));

    onAll(panelTabs, 'click', (e) => {
        e.preventDefault();

        panelTabs.forEach(removeActive);
        addActive(e.target);

        panels.forEach(removeActive);
        addActive(find(e.target.hash));
    });
}

Again, no worries if functional flavor is not your cup of tea. ƒlightDom is built to accomodate everyone's taste.

This is the reason why it only involves simple functions, without making them overly functional. Just good ol' functions, ready to be used in whatever flavor you like them most.

No built-in currying or data last, but ready to be augmented!

Usage

You install it through npm like so:

npm install --save flightdom

You might have noticed, the library is an ES module, nevertheless it also supports CommonJS. So you can either import or require with the tool of your choice.

const fdom = require('flight-dom');

// or

import * from 'flight-dom';

// or

import { find, findAll, … } from 'flightdom'; // this is the preferred way

The last exemple is the preferred method because you'll take advantage of tree shaking and you benefit from unprefixed function names.