@fusorjs/dom
TypeScript icon, indicating that this package has built-in type declarations

2.5.1 • Public • Published

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

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:

Or configure it manually

Contribute

Your contributions are always welcome!

See CHANGELOG for details.

Dependents (0)

Package Sidebar

Install

npm i @fusorjs/dom

Weekly Downloads

15

Version

2.5.1

License

MIT

Unpacked Size

79.8 kB

Total Files

61

Last publish

Collaborators

  • isumix