Fine-Grained Signals

Signals provide optional fine-grained reactivity.

Unlike setState(), signals rerun only the setters that directly consume them.

This enables highly granular updates without rerunning unrelated mutations.

Important

Fine-grained mode is optional.

DOMPP still fully supports the original stateful mutation model.

Signals are useful when developers want: DOMPP fine-grained mode works through direct dependency tracking between signals and reactive setters.

Fine-Grained Pattern 

// =====================================
// SIGNAL
// =====================================
const [
  count,
  setCount
] = document
  .createSignal(0);

// =====================================
// APP
// =====================================
document
  .getElementById("app")
  .setChildren(
    document
      .createElement("div")
      .setAttributes({
        class: "card"
      })
      .setChildren(
        // =============================
        // COUNT
        // =============================
        document
          .createElement("h2")
          .setFineGrained()
          .setAttributes({
            class: "count"
          })
          .setText(() => {
            return
              count();
          }),

        // =============================
        // DESCRIPTION
        // =============================
        document
          .createElement("div")
          .setFineGrained()
          .setAttributes({
            class: "description-box"
          })
          .setStyles(() => ({
            backgroundColor:
              count() % 2 === 0
                ? "lightblue"
                : "lightcoral",
            color:
              "#333",
            padding:
              "1em",
            borderRadius:
              "0.5em"
          }))
          .setText(() => (
            `Current count: ${count()}`
          )),

        // =============================
        // BUTTONS
        // =============================
        document
          .createElement("div")
          .setAttributes({
            class: "row"
          })
          .setChildren(
            document
              .createElement("button")
              .setText(
                "Increment"
              )
              .setEvents({
                click() {
                  setCount(
                    count() + 1
                  );
                }
              }),
            document
              .createElement("button")
              .setText(
                "Decrement"
              )
              .setEvents({
                click() {
                  setCount(
                    count() - 1
                  );
                }
              })
          )
      )
  );
Notes
  • signals track direct reactive dependencies automatically
  • only consuming setters rerun after signal updates
  • unrelated setters remain untouched
  • fine-grained mode is fully optional

Live Preview