@fusorjs/dom

Fusor

Declaratively Creates & Updates DOM

It fuses DOM elements into easy-to-use components

Goals

• Simplicity
  • Small, explicit, pure, functional API
• Flexibility
  • W3C standards compliant
  • Simple things should be simple, complex things should be possible
    • Fine-grained control over creation and updates
• Minimalism
  • Do one thing and do it well
    • Lifting up: state, context, lifecycle, diffing, concurrency
• Performance
  • Efficient use of provided and internal data
    • Immutability, avoid excessive creation
  • Size ~4KiB with zero dependencies

Examples

Create a DOM Element

import {getElement} from '@fusorjs/dom';

const count = 0;
const message = <div>Seconds {count} elapsed</div>; // JSX

document.body.append(getElement(message));

CodeSandbox

Update a DOM Element

import {getElement, update} from '@fusorjs/dom';

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

document.body.append(getElement(message));

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

CodeSandbox

Setting Parameters

///

Create a Reusable Component

click_e - click event handler - keys reference

import {getElement, update} from '@fusorjs/dom';

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

const App = () => (
  <div style="padding:1em">
    <p>Three counting buttons</p>
    <CountingButton />
    <CountingButton count={22} />
    <CountingButton count={333} />
  </div>
);

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

CodeSandbox

Shorter Version

const CountingButton = ({count = 0}) => (
  <button
    click_e={(event, self) => {
      count += 1;
      update(self);
    }}
  >
    Clicked {() => count} times
  </button>
);

CodeSandbox

Shortest Version

click_e_update - click event handler and DOM update - keys reference

const CountingButton = ({count = 0}) => (
  <button click_e_update={() => (count += 1)}>
    Clicked {() => count} times
  </button>
);

CodeSandbox

Lifecycle

It consists of only four stages:

1. Create the component
2. Connect to the DOM
3. Update the DOM
4. Disconnect from the DOM

import {getElement, update} from '@fusorjs/dom';

const IntervalCounter = ({count = 0}) => {
  console.log('1. Create the component');

  return (
    <div
      mount={(self) => {
        console.log('2. Connect to the DOM');

        const timerId = setInterval(() => {
          count++;
          update(self);
          console.log('3. Update the DOM');
        }, 1000);

        return () => {
          clearInterval(timerId);
          console.log('4. Disconnect from the DOM');
        };
      }}
    >
      Since mounted {() => count} seconds elapsed
    </div>
  );
};

const instance = <IntervalCounter />;
const element = getElement(instance);

document.body.append(element);
setTimeout(() => element.remove(), 15000);

CodeSandbox

SVG Analog Clock

This concludes the Tutorial

Now you know how to develop useful applications. In fact, this knowledge enables you to create apps on par with those developed using React, Angular, Vue, Solid...

Fusor vs React comparison

Start Coding

Start with a boilerplate project:

• JavaScript Starter
• TypeScript Starter

Or configure it manually

Documentation

• Reference
• Functional Notation
• Optimisation
• Fusor vs React

Real-World Applications

• TodoMvc - routing, global data store
• Tutorial - routing, http request, lifecycle, svg, jsx, custom element, caching

Contribute

Your contributions are always welcome!

See CHANGELOG for details.