fluidstate-alien

View interactive documentation on the official website.

fluidstate-alien is the Alien Signals-based reactive layer for fluidstate. It bridges the declarative, ergonomic API of fluidstate with one of the fastest and most efficient implementations of the reactivity system.

Key Features

• Seamless Integration: Implements the fluidstate's ReactiveLayer, providing atoms, computed values, and reactions powered by Alien Signal's core APIs.

• Enables fluidstate: Once configured, you can use the complete feature set of fluidstate for your state management needs.

• Convenient Alien Signals Access: Re-exports all Alien Signals APIs used by fluidstate-alien, allowing you to use them directly without adding alien-signals as a separate dependency.

Installation

To use fluidstate with Alien Signals, you need to install fluidstate and fluidstate-alien:

npm install fluidstate fluidstate-alien

or

yarn add fluidstate fluidstate-alien

Usage

To enable fluidstate, you must provide it with the Alien Signals reactive layer. This is a one-time setup at your application's entry point.

import {
	provideReactiveLayer,
	createReactive,
	createReaction,
	runAction,
} from "fluidstate";
import { getReactiveLayer } from "fluidstate-alien";

// 1. Get the reactive layer from fluidstate-alien
const reactiveLayer = getReactiveLayer();

// 2. Provide it to fluidstate
provideReactiveLayer(reactiveLayer);

// 3. You can now use the fluidstate API throughout your application
const counter = createReactive({ value: 0 });

createReaction(() => {
	console.log(`Counter value: ${counter.value}`);
});
// LOGS: Counter value: 0

runAction(() => {
	counter.value++;
});
// LOGS: Counter value: 1

After this setup, you can use the fluidstate package for all your state management tasks. For more details on createReactive, createReaction, and other features, please refer to the main fluidstate documentation.

Using Alien Signals APIs

While fluidstate provides a high-level abstraction, you may occasionally need to use Alien Signals APIs directly. For convenience, fluidstate-alien re-exports the subset of Alien Signals library used by fluidstate-alien from a separate entry point.

This ensures you are using the same instance of Alien Signals that powers fluidstate, which can help prevent version conflicts or bundling issues.

// Instead of a direct import: import { computed } from "alien-signals";
import { computed } from "fluidstate-alien/alien-signals";

This is an optional convenience and is not required for standard fluidstate usage.