dom-foundry v1.0.2

DOM Foundry

Introduction

DOM Foundry is a fast and lightweight DOM manipulation library for creating reusable UI components.

Installation

Install via NPM.

npm install dom-foundry

Example Usage

Import tree-shakable ES6 Module

import { el, style, attribute, Initializer, ... } from "dom-foundry";

Syntax

// create element
const element = el("tag-name", ...childOrInitializer);

document.body.append(
    el("main", style("padding", "1em"),
        el("section",
            // common components like "div", "span", 
            // and "h1..6" are provided.
            h1("Hello World!"),
            p(
                "DOM Foundry is a fast and lightweight DOM manipulation library "+
                "for creating reusable UI components."
            ),
        ),
        el("section", 
            // event-listeners can easily be attached inline
            h1("Event listeners"),
            el("button", onClick(()=>alert("\u{1F389}".repeat(3))), 
                "Click me for a surprise!"
            ),
        ),
        el("section", 
            h1("Reusable components and state binding"),
            
            // custom components can be defined in factory functions
            // (examples in later sections)
            counterButton(0),
            counterButton(1),
            counterButton(Infinity, attributes({ "disabled": "", "title": "Can't click me!" })),
            // poor man's React >.<
        ),
        el("section",
            h1("State binding using observables"),
            
            // The "Observable" class is provided to help with state management.
            // (examples in later sections)
            timeDisplay(),
        )
    ),
);

Custom and Reusable Components

const counterButton = (count = 0, ...initializers: Initializer[]) => (
    el("button",
        // increment count and update text when the button is clicked.
        onClick(function () { this.textContent = `Click me! (${count++})` }),
        // click once to display text immediately upon creation.
        e=>e.click(),
        // apply initializers.
        ...initializers
    )
)

const timeDisplay = ()=>{
    // observables hold arbitrary data and emit an event every time its value is changed.
    const timeText = new Observable(`The time now is: ${new Date().toLocaleTimeString()}`);

    // update value every second. (memory leak!)
    setInterval(()=>timeText.set(`The time now is: ${new Date().toLocaleTimeString()}`), 500);

    // some built-in initializers accept observables.
    // (e.g. textContent(), style(), attribute()) 
    return fragment(
        div(textContent(timeText)),
        div(textContent(timeText), styles({ color: "red" })),
    )
}

License

Licensed under MIT. All files can be used for commercial or non-commercial purposes. Do not resell. Attribution is appreciated but not due.