Incremental DOM - Conditional Rendering

Demonstrate how Angular uses Incremental DOM for conditionally rendering elements, and how it avoids unnecessary DOM updates.

import { elementOpen, elementClose, text, patch } from 'incremental-dom';

function render(data) {
  elementOpen('div', null, null);
    if (data.showWelcome) {
      elementOpen('h1');
        text('Welcome!');
      elementClose('h1');
    }
    elementOpen('p');
      text(data.message);
    elementClose('p');
  elementClose('div');
}

const data = {
  showWelcome: true,
  message: 'This is conditional rendering with Incremental DOM.'
};

// Initial patch.
patch(document.body, () => render(data));

// Update the data, this will re-render only if there is a change detected by Incremental DOM.
data.showWelcome = false;
data.message = 'This message is updated!';

// Re-patch with updated data
patch(document.body, () => render(data));

This code snippet defines a `render` function using Incremental DOM's `elementOpen`, `elementClose`, `text`, and `patch` functions to conditionally render elements based on the `showWelcome` property of the passed `data` object. It sets up the initial rendering, updates the data, and demonstrates how re-patching applies changes to the DOM. The Incremental DOM's internal diffing algorithm will apply only the differences without re-rendering unchanged parts, which helps in improving performance and avoiding unnecessary updates.