DOM Utils

A lightweight TypeScript library for creating HTML elements in a declarative, type-safe way. Provides tag-specific functions (e.g., div, a, button) for all standard HTML tags to simplify DOM manipulation.

Usage

Import tag functions to create DOM elements with type-safe properties and children.

import { div, a, button } from '@ripetchor/dom';

const app = div(
  { className: 'container', style: { backgroundColor: '#1f1f1f' } },
  a({ href: 'https://example.com' }, 'Visit Example'),
  button({ type: 'button', click: () => alert('Clicked!') }, 'Click me')
);

document.body.appendChild(app);

Output:

<div class="container" style="background-color: #1f1f1f;">
  <a href="https://example.com">Visit Example</a>
  <button type="button">Click me</button>
</div>

Features

• Type-safe tag functions for all HTML tags (e.g., div, span, a, etc.).
• Supports element properties (className, style, etc.) and events from GlobalEventHandlersEventMap type.
• Event listeners accept an AbortSignal via the signal property.
  This allows you to automatically clean up event listeners without calling removeEventListener manually:

  const controller = new AbortController();
  
  const btn = button(
    {
      click: () => console.log('clicked'),
      signal: controller.signal,
    },
    'Click'
  );
  
  // later
  controller.abort(); // all listeners bound with this signal are removed

License

MIT