MobX Adapter

MobX simplifies reactive state management, allowing you to create observable states and actions. Ignite-Element’s MobX adapter works seamlessly with MobX observables, enabling your components to react to state changes dynamically.

---

Define a MobX Store with TypeScript Support

Here’s a counter implementation using MobX:

TypeScript

import { action, observable, makeObservable } from "mobx";

class Counter {
  @observable count = 0;

  constructor() {
    makeObservable(this);
  }

  @action increment() {
    this.count += 1;
  }

  @action decrement() {
    this.count -= 1;
  }
}

// Use a factory function to create a fresh instance
const counterStore = () => new Counter();

export default counterStore;

Note: MobX uses decorators for its @observable and @action annotations. Make sure you have decorators enabled in your TypeScript configuration. Learn More: Visit the MobX documentation on enabling decorators.

---

Plug into Ignite-Element

Pass the factory function directly to igniteCore:

TypeScript

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

const igniteElement = igniteCore({
  adapter: "mobx",
  source: counterStore, // Pass the factory function
});