@puraty/signal-store

A minimalist, zero-dependency, type-safe signal library for reactive state management, leveraging modern JavaScript Proxies for efficient dependency tracking. Inspired by SolidJS and Angular Signals, this library provides a simple yet powerful primitive for building reactive applications without the complexity of traditional state management tools.

Features

• Minimal Footprint: Focuses purely on the signal primitive and core reactivity (effect, computed).
• Type Safety: Built with TypeScript to ensure type consistency from definition to consumption.
• Efficient Reactivity: Uses getter/setter functions and internal tracking to ensure functions re-run only when their specific dependencies change.
• No Proxies Required: Unlike some reactive libraries, this library uses simple functions, avoiding potential Proxy-related pitfalls in frameworks.

Installation

npm install @puraty/signal-store

Usage

The library provides three core functions: createSignal, createEffect, and computed.

1. createSignal (State)

The basic readable and writable state primitive.

import { createSignal } from '@puraty/signal-store';

const [count, setCount] = createSignal(0);

console.log(count()); // 0

setCount(count() + 1);

console.log(count()); // 1

2. computed (Derived State)

Creates a read-only signal that automatically re-calculates when its dependencies change.

import { createSignal, computed } from '@puraty/signal-store';

const [firstName, setFirstName] = createSignal("Alice");
const [lastName, setLastName] = createSignal("Smith");

// This function will only re-run when firstName() or lastName() is called and changes.
const fullName = computed(() => {
    return `${firstName()} ${lastName()}`;
});

console.log(fullName()); // "Alice Smith"

setFirstName("Bob"); // Triggers re-calculation
console.log(fullName()); // "Bob Smith"

3. createEffect (Side Effects)

Creates a function that automatically runs whenever any signal it reads changes.

import { createSignal, createEffect } from '@puraty/signal-store';

const [clicks, setClicks] = createSignal(0);

// This function will run immediately, and then every time 'clicks' changes.
createEffect(() => {
    // This is where side effects like DOM updates or console logging happen
    console.log(`The click count is now: ${clicks()}`);
});

setClicks(1); // Output: The click count is now: 1
setClicks(2); // Output: The click count is now: 2

API Reference

| Function | Description | | :--- | :--- | | createSignal<T>(initialValue: T) | Creates a reactive state primitive. Returns [getter, setter]. | | computed<T>(callback: () => T) | Creates a read-only signal that automatically tracks dependencies and re-calculates when they change. Returns getter. | | createEffect(callback: Listener) | Creates a side-effect that automatically re-runs when any signal it reads changes. Returns a cleanup function. |

License

This project is licensed under the ISC License. See the LICENSE file for details.

Contributing

Feel free to open issues or submit pull requests to improve this utility!