DOM Identity Preservation

DOM++ preserves runtime ownership by reusing the same DOM node references.

This example demonstrates how DOM identity affects:

Important

In DOM++, DOM node references are runtime identity.

If the same node reference is reused: If a node is recreated entirely:

Identity Preservation Pattern 

// =====================================
// FACTORY
// =====================================
function createCounter() {
  const identity =
    Math.random()
      .toString(36)
      .slice(2, 8);

  // =====================================
  // ELEMENT
  // =====================================
  return document
    .createElement("div")
    .setAttributes({
      class: "card"
    })
    .setState({
      count: 0
    })
    .setChildren(({
      state,
      setState
    }) => [
      // ===============================
      // IDENTITY
      // ===============================
      document
        .createElement("div")
        .setAttributes({
          class: "identity"
        })
        .setText(
          `Identity: ${identity}`
        ),

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

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

// =====================================
// INITIAL NODE
// =====================================
let counter =
  createCounter();

// =====================================
// ROOT
// =====================================
const root =
  document
    .createElement("div")
    .setChildren(
      counter
    );

// =====================================
// REUSE SAME NODE
// =====================================
reuse.setEvents({
  click() {
    root.setChildren(
      counter
    );
  }
});

// =====================================
// REPLACE NODE
// =====================================
replace.setEvents({
  click() {
    counter =
      createCounter();

    root.setChildren(
      counter
    );
  }
});

// =====================================
// APP
// =====================================
app.setChildren(
  root
);
Notes
  • DOM references define identity
  • state survives reused references
  • recreated nodes receive new identity
  • local runtime ownership is attached directly to DOM nodes

Live Preview