@fusorjs/dom

Fusor

Fusor is a simple JavaScript library that declaratively creates and updates DOM elements

It fuses elements

Goals

• Performance
• Simple, explicit and flexible API
• Compatible and integrable with other tools
• Do one thing and do it well (manage DOM elements)
• Simple things should be simple, complex things should be possible (Alan Kay)
• Fine-grained control over:
  • DOM updates
  • Diffing strategy
  • State management
• Lightweight (~4KiB and zero dependencies)

FN Example

• Functional-notation button counter (hyper-notation also available)
• No transpilation needed

Playground

import {button, div, p} from '@fusorjs/dom/html';

const CountingButton = (count = 0) => {
  const component = button(
    {
      click$e: () => {
        count += 1;
        component.update();
      },
    },
    'Clicked ',
    () => count,
    ' times',
  );
  return component;
};

const App = () =>
  div(
    p('Hello Fusor'),
    CountingButton(),
    CountingButton(22),
    CountingButton(333),
  );

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

The click$e means:

• click name
• event handler
• $ separator symbol (configurable)

See the complete key reference

JSX Example

• Same counter button implemented with JSX
• Adds the option to update the component after the click event

Playground

const CountingButton = ({init: count = 0}) => (
  <button click$e$update={() => (count += 1)}>
    Clicked {() => count} times
  </button>
);

const App = () => (
  <div>
    <p>Hello Fusor</p>
    <CountingButton />
    <CountingButton init={22} />
    <CountingButton init={333} />
  </div>
);

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

Documentation

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

Demo

• Tutorial - routing, request, lifecycle, SVG, JSX...
• Todo-list
• SVG analog clock

Contribute

Contributions are welcome

See CHANGELOG for details