XState Adapter

XState is a robust state management library for creating state machines. Ignite-Element integrates seamlessly with XState, leveraging its powerful TypeScript features to provide type-safe state management.

---

Define a State Machine with TypeScript Support

Here’s a counter state-machine with strong typing for events and context:

TypeScript

import { assign, setup } from "xstate";

const counterMachine = setup({
  types: {
    events: {} as { type: "START" } | { type: "INC" } | { type: "DEC" },
    context: {} as {
      count: number;
    },
  },
}).createMachine({
  id: "counter",
  initial: "idle",
  context: {
    count: 0,
  },
  states: {
    idle: {
      on: {
        START: {
          target: "active",
        },
      },
    },
    active: {},
  },
  on: {
    INC: {
      actions: assign({
        count: ({ context }) => context.count + 1,
      }),
    },
    DEC: {
      actions: assign({
        count: ({ context }) => context.count - 1,
      }),
    },
  },
});

export default counterMachine;

Learn More: Check out the XState + TypeScript documentation to explore how TypeScript enhances XState’s type safety and developer experience.

---

Plug into Ignite-Element

You can use this machine with Ignite-Element as follows:

TypeScript

import { igniteCore } from "ignite-element";
import counterMachine from "./counterMachine";

const igniteElement = igniteCore({
  adapter: "xstate",
  source: counterMachine,
});

---

Why Use XState with Ignite-Element?

• Type Safety: XState’s TypeScript support ensures your state machine is fully type-checked, making state transitions and event dispatch predictable and reliable.

• Visualize State Machines: Combine Ignite-Element’s rendering capabilities with XState’s visualization tools for debugging and collaboration.

• Scalability: XState’s hierarchical and parallel states work seamlessly with Ignite-Element, enabling you to manage complex application states easily.