Fusor

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

It fuses DOM elements into easy-to-use components.

Fusor is:

• Simple ― two main API methods (create/update DOM)
• Compliant ― follows W3C standards
• Explicit/Flexible ― full control over DOM creation/updates, state, context, lifecycle, diffing, and concurrency
• Performant ― efficient use of data and code
• Small ― size ~4KiB with zero dependencies

"Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away." ― Antoine de Saint-Exupéry

Component Examples

All examples are available on CodeSandbox

click_e_update ― click event handler with DOM update, see: Parameter Keys Reference

Click Counting Button

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

Controlled Uppercase Input

const UppercaseInput = ({value = ''}) => (
  <input
    value={() => value}
    input_e_update={(event) => (value = event.target.value.toUpperCase())}
  />
);

Mounting Timer

const IntervalCounter = ({count = 0}) => (
  <div
    mount={(self) => {
      const timerId = setInterval(() => {
        count++;
        update(self);
      }, 1000);

      return () => clearInterval(timerId); // unmount
    }}
  >
    Since mounted {() => count} seconds elapsed
  </div>
);

Also, check out SVG Analog Clock.

Documentation

• Tutorial
• Reference
• Functional Notation
• Optimisation
• Fusor vs React

Real-World Applications

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

Start Coding

Start with a boilerplate project:

• JavaScript Starter
• TypeScript Starter

Or configure it manually

Contribute

Your contributions are always welcome!

See CHANGELOG for details.