Solid

Solid reactivity is built around accessors and setters from createSignal. To connect @ilokesto/store, keep the external store as the source of truth and mirror its current snapshot into a Solid signal.

Create a signal adapter

import { createSignal, onCleanup, type Accessor } from "solid-js";
import { Store } from "@ilokesto/store";

export function useStoreSignal<T>(store: Store<T>): Accessor<Readonly<T>> {
  const [state, setState] = createSignal<Readonly<T>>(store.getState());

  const unsubscribe = store.subscribe(() => {
    setState(() => store.getState());
  });

  onCleanup(unsubscribe);

  return state;
}

Call this helper inside a Solid owner, such as a component or another function created under a component. onCleanup() ties the external subscription to that owner.

Use it in a component

import { Store } from "@ilokesto/store";
import { useStoreSignal } from "./useStoreSignal";

type CounterState = { count: number };

const counterStore = new Store<CounterState>({ count: 0 });

export function CounterButton() {
  const counter = useStoreSignal(counterStore);

  const increment = () => {
    counterStore.setState((prev) => ({ count: prev.count + 1 }));
  };

  return (
    <button type="button" onClick={increment}>
      Count: {counter().count}
    </button>
  );
}

Solid reads signal values by calling the accessor. Use counter() in JSX and TypeScript code.

Keep writes in the external store

The Solid signal is a view of the external store, not a second state owner. Write through store.setState() so middleware, replacement semantics, Object.is no-notify behavior, and all non-Solid subscribers stay consistent.

Equality note

If the store resolves an update to the same reference, @ilokesto/store does not notify. Return new objects or arrays for changed object state so both the external store and Solid observers see the replacement.