@fusorjs/dom

Fusor

Fusor is a simple JavaScript library that helps declaratively create and update DOM elements.

It fuses DOM elements together.

Example

Create DOM

document.body.append(<div>The ultimate answer is {42}</div>); // JSX

Update DOM

let count = 0;
const answer = <div>Seconds {() => count} elapsed</div>;

document.body.append(answer.element);

setInterval(() => {
  count += 1;
  answer.update();
}, 1000);

Reusable Component

click_e - means click event handler - view all W3C standard compliant options

const CountingButton = ({count = 0}) => {
  const btn = (
    <button
      click_e={() => {
        // click event handler
        count += 1;
        btn.update();
      }}
    >
      Clicked {() => count} times
    </button>
  );
  return btn;
};

const App = () => (
  <div>
    <p>Three click-counting buttons</p>
    <CountingButton />
    <CountingButton count={22} />
    <CountingButton count={333} />
  </div>
);

document.body.append(App().element);

Playground

Not a React clone

While Fusor shares some concepts with React, it distinguishes itself by adopting a more flexible and minimalist approach. Essentially, the complexity of hooks, lifecycle, and concurrency is replaced by fine-grained DOM update control.

Fusor vs React comparison

Goals

Simplicity + Minimalism + Flexibility + Performance

• Small, simple, explicit and flexible API.
• Standards compliant and integrable with other tools.
• Do one thing and do it well (manage DOM elements), outsource: state, lifecycle, context, diffing, etc.
• Simple things should be simple, complex things should be possible (Alan Kay). Fine-grained control over DOM updates.
• Efficient CPU and memory usage by reusing given objects and arrays without their recreation nor modification. Avoid arrays flattening, object's resting or spreading operations.
• Lightweight (~4KiB with zero dependencies).

Documentation

• START WITH TUTORIAL
• Reference
• Functional Notation
• Optimisation
• Fusor vs React

Demos

• Use cases (routing, request, lifecycle, SVG, JSX...)
• Todo-list
• SVG analog clock
• FN counting button
• JSX counting button

Contribute

Your contributions are welcome!

See CHANGELOG for details.