@generative-dom/plugin-events

Invisible event-emitting elements for Generative DOM — produce no DOM output.

Installation

pnpm add @generative-dom/plugin-events

Usage

import { GenerativeDom } from '@generative-dom/core';
import { events } from '@generative-dom/plugin-events';

const md = new GenerativeDom(container, { plugins: [events()] });

md.on('progress', (data) => console.log('progress:', data));
md.on('status', (data) => console.log('status:', data));
md.on('milestone', (data) => console.log('milestone:', data));

md.push('<progress value="42" total="100" />\n');
md.push('<status code="ok" message="Done" />\n');
md.push('<milestone name="phase-1" />\n');

Matching

Matches self-closing elements whose tag name is exactly progress, status, or milestone. Any attributes in key="value" format are parsed; numeric values are automatically converted from strings to numbers.

<progress value="50" total="100" />
<status code="running" />
<milestone name="launch" />

Configuration

• priority: 40 (matched before custom-elements and interactive)
• level: block (default)
• matchDescriptor: { startChars: '<' }

Rendered Output

These elements produce no DOM nodes. render() always returns null. Instead, the plugin emits a namespaced event via the plugin context:

• <progress .../> emits 'progress' with the parsed attribute object
• <status .../> emits 'status' with the parsed attribute object
• <milestone .../> emits 'milestone' with the parsed attribute object

Subscribe with generativeDom.on(eventName, handler).