Skip to content
Ignite Element logo Ignite Element logo Ignite Element

igniteCore

igniteCore adapts your state source (XState, Redux, MobX) into a render-ready component factory.

import { igniteCore } from 'ignite-element/xstate';


const component = igniteCore({
  source: machineOrActor,
  events: (event) => ({ /* typed events */ }),
  view: ({ context }) => ({ /* derived values */ }),
  commands: ({ actor, host }) => ({ /* actions */ }),
  effects: ({ snapshot, prevSnapshot, emit, actor, host, select }) => { /* consequences */ },
});


component('tag-name', (props) => /* JSX or lit template */);

Parameters

Section titled “Parameters”
  • source: machine definition or started actor (XState), Redux store/slice, or MobX observable.
  • events(mapper): optional; defines typed DOM events.
  • view(ctx): derive render props from the snapshot context — an object snapshot’s fields are spread onto ctx (with ctx.snapshot still available); runs on mount and on changes.
  • commands(context): expose actions; receives { actor, host }.
  • effects(snapshot, prevSnapshot, context): optional; runs after every state update and receives { emit, actor, host, select }.
  • cleanup: shared-adapter teardown override. Defaults to false for shared (consumer-owned) sources — a live instance you pass lives for the core’s lifetime, so the shared adapter is kept alive across element disconnects. For isolated sources (Ignite creates one adapter per element, stopped on disconnect) it has no practical effect. Set cleanup: true on a shared core to opt back into element-refcount teardown of the adapter. Ignite never stops or closes a source it did not create.

Returns

Section titled “Returns”

A component factory — call it as component(tagName, renderer) to register the custom element (returns nothing). The same value is also the headless runtime: it carries execute, getSnapshot, getView, getSchema, on, watchSnapshot, watchView, and record for driving and inspecting the component without the DOM.

Advanced overrides

Section titled “Advanced overrides”

cleanup controls shared-adapter teardown; most components won’t need to change it. A consumer-owned shared source is kept alive for the core’s lifetime by default — pass cleanup: true only to opt a shared core back into element-refcount teardown of the adapter.

const component = igniteCore({
  source: actor,
  cleanup: true, // opt this shared core back into element-refcount teardown of the adapter
});

See The Ignite model for adapter-specific behavior.

Headless runtime

Section titled “Headless runtime”

Every component registration also exposes a headless runtime (execute, getSnapshot, getView, getSchema, on, watchSnapshot, watchView, record) for driving and inspecting behavior without the DOM. See Headless runtime for the full method reference.

Section titled “Related”