Existing DOM Enhancement + Signals

DOMPP can enhance existing server-rendered HTML while still using optional fine-grained signals.

This combines:

Existing HTML becomes the reactive UI.

Important

Unlike setChildren(), setEnhancement() does not recreate or replace the DOM tree.

Existing HTML becomes directly reactive.

Only setters consuming signals rerun. This combines progressive enhancement with fine-grained reactivity.

Enhancement + Signals Pattern 

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

// =====================================
// ENHANCE EXISTING DOM
// =====================================
document
  .getElementById(
    "counter-app"
  )
  .setFineGrained()
  .setEnhancement(({
    childNodes
  }) => {
    // =================================
    // EXISTING NODES
    // =================================
    const countNode =
      childNodes[1];
    const descriptionNode =
      childNodes[3];
    const controls =
      childNodes[5];
    const incrementButton =
      controls.childNodes[1];
    const decrementButton =
      controls.childNodes[3];

    // =================================
    // COUNT TEXT
    // =================================
    countNode
      .setFineGrained()
      .setText(() => {
        return
          count();
      })
      .setStyles(() => ({
        color:
          count() > 0
            ? "limegreen"
            : count() < 0
              ? "tomato"
              : "#222"
      }));

    // =================================
    // DESCRIPTION
    // =================================
    descriptionNode
      .setFineGrained()
      .setText(() => (
        `Current count: ${count()}`
      ))
      .setStyles(() => ({
        backgroundColor:
          count() % 2 === 0
            ? "lightblue"
            : "lightcoral",
        color:
          "#333",
        padding:
          "1em",
        borderRadius:
          "0.5em"
      }));

    // =================================
    // BUTTONS
    // =================================
    incrementButton
      .setEvents({
        click() {
          setCount(
            count() + 1
          );
        }
      });
    decrementButton
      .setEvents({
        click() {
          setCount(
            count() - 1
          );
        }
      });
  });
Notes
  • existing DOM nodes are reused directly
  • signals rerun only consuming setters
  • no DOM tree recreation occurs
  • ideal for SSR + progressive enhancement
  • combines hydration-like behavior with fine-grained updates

Live Preview

0

Current count: 0