@composize/dom

A declarative DSL for creating and manipulating DOM elements.

Renderer configuration

Configure a renderer before creating nodes. DomRenderer is the built-in browser implementation and must be instantiated by the caller. A renderer implements creation, insertion, property, style, attribute, and event operations. Extend DomRenderer to override only the behavior you need.

import { DomRenderer, setupConfig } from '@composize/dom';

class LoggingRenderer extends DomRenderer {
  override appendChild(parent: ParentNode, child: Node) {
    console.debug('append', child);
    super.appendChild(parent, child);
  }
}

setupConfig({ renderer: new LoggingRenderer() });
Copy

Use setupConfig({ renderer: new DomRenderer() }) to restore the built-in renderer.

Examples

import { element, fragment, inlineStyle, listener, style, text } from '@composize/dom';

function Card(title: string, content: string) {
  element('div', { class: 'card' }, () => {
    element('h3', () => {
      inlineStyle({ color: '#333' });
      text(title);
    });
    element('p', content);
    element('button', { style: { color: 'blue' } }, () => {
      text('Action');
      listener('click', console.log);
    });
  });
}

fragment(() => {
  style({
    '.card': {
      border: '1px solid #e0e0e0',
      padding: '20px',
      width: '300px',
    }
  });

  for (let index = 0; index < 3; index++) {
    Card('Declarative Cards', 'Declaratively create DOM using DSL.');
  }
});
Copy