Fusor

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

It combines DOM elements into components that can be used to build real-world web applications, just like in React, Angular, or Vue. But it's simpler and more efficient.

Fusor is:

• Simple ― just two main API methods: create and update (the 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 ~3kB with zero dependencies

Fusor's philosophy:

"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 Counting Button

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

Some of the Parameter Options:

<div
  name1="automatic attribute or property"
  name2_a="attribute"
  name3_p="property"
  name4_e={(event) => 'handler'}
  name5_e_capture_once={(event) => 'handler with options'}
/>

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

Contributing

Your suggestions and contributions are always welcome!

Please see CONTRIBUTING for details and CHANGELOG for agenda.