[cowboyd]

Stateful elements need to communicate outward in a way that works equally well for raw Host consumers and JSX frameworks. An input should be able to emit a semantic value change without importing React, Preact, or Solid, while adapters should be able to translate familiar properties such as onInput into the same listener mechanism. Host listeners and EmitApi provide that common outbound event path.

Listeners belong to element identity rather than a temporary attached node, so they can be registered before attachment and survive reparenting. The open HostEvents interface lets third-party element authors add strongly typed events through declaration merging, while the runtime verifies that an event’s target actually matches the node that emitted it. This is deliberately complementary to dispatch: dispatch carries external events into the tree, whereas emit carries semantic events from an element to its consumers.

import type { HostEvent } from '@clack/ui/events';
import { emit } from './emit.ts';

declare module '@clack/ui/events' {
	interface HostEvents {
		change: HostEvent<'change'> & { value: string };
	}
}

host.addEventListener(element, 'change', (event) => {
	console.log(event.value);
});

emit(element.node!, {
	type: 'change',
	value: 'next',
});

This PR adds HostEvent, the extensible HostEvents registry, EmitApi, and typed Host listener registration and removal. Listener storage is scoped by element and event type and remains stable across attachment changes. Tests cover ordering, identity, mutation during emission, type inference, target validation, and error propagation.

[pkg-pr-new]

• @examples/basic

  npm i https://pkg.pr.new/bombshell-dev/ui/@clack/ui@27
  

commit: f8a59ba

[cowboyd]

closing out in favor of a DOM based substrate. See #37