Reactive Children

setChildren() can also become reactive.

When state changes, the entire child tree can be rebuilt declaratively.

This enables: dynamic lists, structural UI updates, and conditional rendering patterns.

Important

Reactive children rerun the entire child tree callback after state mutation.

This differs from fine-grained signals.

DOMPP rebuilds the children structure directly using native DOM mutation.

No virtual DOM reconciliation occurs.

Reactive Tree Pattern 

const todo =
  document
    .createElement("div")
    .setAttributes({
      class: "card"
    })

    // ===============================
    // LOCAL STATE
    // ===============================
    .setState({
      items: [
        "Apple",
        "Orange"
      ]
    })

    // ===============================
    // REACTIVE TREE
    // ===============================
    .setChildren(({ state }) => {
      return [
        // ===========================
        // HEADER
        // ===========================
        document
          .createElement("h2")
          .setText(
            `Todo List (${state.items.length})`
          ),

        // ===========================
        // ITEMS
        // ===========================
        ...state.items.map((item) =>
          document
            .createElement("div")
            .setAttributes({
              class: "item"
            })
            .setText(item)
        ),

        // ===========================
        // BUTTON
        // ===========================
        document
          .createElement("button")
          .setText(
            "Add Item"
          )
          .setEvents(() => ({
            click() {
              todo.setState(
                ({ state }) => {
                  state.items.push(
                    "Item " +
                    (
                      state.items.length + 1
                    )
                  );
                }
              );
            }
          }))
      ];
    });

app
  .setChildren(
    todo
  );
Notes
  • the entire child tree callback reruns after state mutation
  • useful for dynamic lists and structural UI updates
  • child trees are rebuilt using direct DOM mutation
  • no virtual DOM diffing or reconciliation occurs

Live Preview