Fandom NPM | npm.io

fandom

Attention

Until v1.0.0 is released any breaking changes could be introduced without major version bumping

About

fandom is a lightweight vanilla package that helps build DOM nodes

It has quite limited abilities but it's good enough in simple cases

Motivation

I'm a bit tired that some developers use heavy tools (like React, Vue or Angular) everywhere and all the time even if application is so tiny. Those tools are everywhere around us. It's over-engineering and a bit stupid from my point of view. Let's make something lightweight and nice.

Usage

import { Builder, convert, clear, insert, replace } from "fandom";

const $root = document.querySelector("#root");

const builder = new Builder();
const elements = [3, 14, 15, 9, 26];

builder.div({ class: "list" });

for (let i = 0; i < elements.length; i++) {
    builder.div({ id: elements[i], style: { color: "red" } }).text(`number ${elements[i]}`).close();
}

builder.close();

const model = builder.done();
const domElements = convert(model);

replace($root, domElements);

const $notifications = document.querySelector("#notifications");
clear($notifications);

const changeHandler = (e) = console.log(e.target.value);
builded.input(null, {change: changeHandler});
insert($root, convert(builder.done()));