Skip to content

events

Parses invisible event elements from the stream that emit events through the plugin system but produce no DOM output. Demonstrates purely side-effect-driven plugins.

Details

PropertyValue
Nameevents
Priority40
TypeBlock + Inline
Factoryevents()

Syntax

markdown
<progress value="35" max="100" />
<status type="complete" />
<milestone name="section-1" />

These elements are consumed by the parser and produce events, but nothing is added to the DOM. The render() method returns null.

Event Payloads

progress

markdown
<progress value="35" max="100" />
ts
md.on('events:progress', (data) => {
  // data: { value: 35, max: 100 }
});

status

markdown
<status type="complete" />
ts
md.on('events:status', (data) => {
  // data: { type: "complete" }
});

milestone

markdown
<milestone name="section-1" />
ts
md.on('events:milestone', (data) => {
  // data: { name: "section-1" }
});

API

ts
import { events } from '@generative-dom/plugins';

const plugin = events();

No configuration options.

Mixing with Markdown

Event elements can appear inline with regular markdown content:

markdown
Hello <progress value="50" max="100" /> world

This renders "Hello world" in the DOM. The <progress> element is consumed and its event is emitted, but no visual gap appears in the output.

Multiple Events

Events can appear in sequence:

markdown
<milestone name="intro" />
# Introduction
Content here.
<progress value="25" max="100" />
<milestone name="body" />
# Body
More content.
<status type="complete" />

Each event element fires as it is parsed. Events are dispatched synchronously.

Edge Cases

  • Missing attributes: <progress /> without value or max still emits an event with an empty data object. It does not crash.
  • Mixed with regular markdown: Event elements can appear at the start, middle, or end of a line.
  • Multiple events in sequence: Each fires independently.
  • Stream splits inside event element: <progress val + ue="50" /> -- the buffer waits for the complete element.
  • Unknown event elements: Only progress, status, and milestone are recognized. Others are ignored by this plugin (they may be handled by other plugins or fall through to text).

Rendering

The render() method returns null for all tokens produced by this plugin. The core treats the token as consumed but produces no DOM output. This is the mechanism that makes event elements invisible.