Reactive Counter

Reactive setter callbacks automatically rerun when local state changes.

In this example:

all react to the same local state.

Important

DOMPP local reactivity is built around setState().

Reactive setters rerun automatically after state mutation.

This is not virtual DOM rendering.

DOMPP reruns only the registered setter callbacks directly attached to the same element.

Reactive Pattern 

const counter =
  document
    .createElement("button")

    // ===============================
    // LOCAL STATE
    // ===============================
    .setState({
      count: 0
    })

    // ===============================
    // REACTIVE TEXT
    // ===============================
    .setText(({ state }) => {
      return (
        `Count: ${state.count}`
      );
    })

    // ===============================
    // REACTIVE STYLES
    // ===============================
    .setStyles(({ state }) => ({
      background:
        state.count % 2 === 0
          ? "black"
          : "tomato",
      transform:
        `scale(${1 + state.count * 0.02})`
    }))

    // ===============================
    // REACTIVE ATTRIBUTES
    // ===============================
    .setAttributes(({ state }) => ({
      class:
        "counter",
      title:
        `Current count: ${state.count}`
    }))

    // ===============================
    // EVENTS
    // ===============================
    .setEvents(({ state, setState }) => ({
      click() {
        setState({
          count:
            state.count + 1
        });
      }
    }));

app
  .setChildren(
    counter
  );
Notes
  • local state is attached directly to the DOM element
  • reactive setters rerun after setState()
  • no virtual DOM or diffing occurs
  • updates remain localized to the same element instance

Live Preview