@yagni-js/yagni-dom NPM

yagni-dom

Yet another pure functional DOM API related frontend library built on top of yagni library.

Pure functional in this context means functional code style - library code is linted using eslint-plugin-fp and eslint-plugin-better. Javascript code of the library is purely functional.

Installation

Using npm:

$ npm install --save-dev @yagni-js/yagni-dom

Using yarn:

$ yarn add -D @yagni-js/yagni-dom

Usage

Source code is written using ES6 modules, built using rollup and distributed in two formats - as CommonJS module and as ES6 module.

CommonJS usage:

const dom = require('@yagni-js/yagni-dom');

ES6 module usage:

import * as dom from '@yagni-js/yagni-dom';
// or
import { h, hSVG, hText } from '@yagni-js/yagni-dom';

Documentation

Not yet available, please check sources.

Example

Here is an example of library usage:

import { pipe } from '@yagni-js/yagni';
import { h, hText, render, firstChild } from '@yagni-js/yagni-dom';

const doc = window.document;

const renderToBody = pipe([
  render(doc.body),
  firstChild
]);

const layout = h('div', {class: 'root'}, {}, [
  h('div', {class: 'header'}, {}, [hText('Header')]),
  h('div', {class: 'main'}, {}, [
    h('div', {class: 'sidebar'}, {}, [hText('Sidebar')]),
    h('div', {class: 'content'}, {}, [hText('Content')])
  ]),
  h('div', {class: 'footer'}, {}, [hText('Footer')])
]);

const el = renderToBody(layout);

which is an equivalent to the following raw DOM API calls:

const doc = window.document;

const root = doc.createElement('div');
const header = doc.createElement('div');
const main = doc.createElement('div');
const sidebar = doc.createElement('div');
const content = doc.createElement('div');
const footer = doc.createElement('div');

root.classList.add('root');
header.classList.add('header');
main.classList.add('main');
sidebar.classList.add('sidebar');
content.classList.add('content');
footer.classList.add('footer');

header.appendChild(doc.createTextNode('Header'));
sidebar.appendChild(doc.createTextNode('Sidebar'));
content.appendChild(doc.createTextNode('Content'));
footer.appendChild(doc.createTextNode('Footer'));

main.appendChild(sidebar);
main.appendChild(content);

root.appendChild(header);
root.appendChild(main);
root.appendChild(footer);

doc.body.appendChild(root);