Reusable Stateful Elements

DOMPP does not use a component system.

Instead, reusable UI can be created using plain JavaScript functions that return native DOM elements.

Each returned element can contain its own isolated local state.

Important

DOMPP intentionally avoids introducing a dedicated component abstraction.

Reusable UI is created using: plain functions, native DOM elements, and local reactive state.

Each returned element instance owns its own state independently.

This keeps composition aligned with standard JavaScript and native DOM APIs.

Factory Pattern 

// =====================================
// FACTORY
// =====================================
function createCard(title) {
  return document
    .createElement("div")
    .setAttributes({
      class: "card"
    })

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

    // ===============================
    // REACTIVE TREE
    // ===============================
    .setChildren(({ state, setState }) => [
      // =============================
      // TITLE
      // =============================
      document
        .createElement("h2")
        .setText(title),

      // =============================
      // REACTIVE COUNT
      // =============================
      document
        .createElement("div")
        .setAttributes({
          class: "likes"
        })
        .setText(
          `${state.likes}`
        ),

      // =============================
      // BUTTON
      // =============================
      document
        .createElement("button")
        .setText(
          "Like"
        )
        .setEvents({
          click() {
            setState({
              likes:
                state.likes + 1
            });
          }
        })
    ]);
}

// =====================================
// APP
// =====================================
app
  .setChildren(
    document
      .createElement("div")
      .setAttributes({
        class: "grid"
      })
      .setChildren(
        createCard("Card A"),
        createCard("Card B"),
        createCard("Card C")
      )
  );
Notes
  • reusable UI is built using normal JavaScript functions
  • each returned DOM element owns its own isolated local state
  • no component runtime or compiler is required
  • composition remains native and explicit

Live Preview