remix-run/remix interaction@0.2.0

interaction v0.2.0

on GitHub

BREAKING CHANGE: Interaction API refactor - interactions now use this context with this.on(), this.target, this.signal, and this.raise

Interactions are now functions that receive an Interaction context via this:

// Before
function MyInteraction(target: EventTarget, signal: AbortSignal) {
  createContainer(target, { signal }).set({ ... })
}

// After
function MyInteraction(this: Interaction) {
  this.on(this.target, { ... })
  // or for different targets
  this.on(this.target.ownerDocument, { ... })
}

The Interaction context provides:

• this.target - The target element
• this.signal - Abort signal for cleanup
• this.raise - Error handler (renamed from onError)
• this.on(target, listeners) - Create a container with automatic signal/error propagation

BREAKING CHANGE: Simplify descriptor API - descriptors now extend AddEventListenerOptions directly

Removed capture() and listenWith() helper functions. Consumers now provide options inline using descriptor objects:

// removed
capture((event) => {})
listenWith({ once: true }, (event) => {})

// new API
{
  capture: true,
  listener(event) {}
}
{
  once: true,
  listener(event) {}
}

BREAKING CHANGE: Remove on signal overload, just use containers directly

// removed
on(target, signal, listeners)

// on is just a shortcut now
let dispose = on(target, listeners)
dispose()

// use containers for signal cleanup
let container = createContainer(target, { signal })

Added onError handler so containers can handle listener errors in one place (avoids Remix Component needing to wrap EventListener interfaces to raise to <Catch>)

createContainer(target, {
  onError(error) {
    // handle error
  },
})