DEV Community

Jordan Tauscher
Jordan Tauscher

Posted on

EIS: A Tiny, Framework-Agnostic State Store for the Web

EIS: A Tiny, Framework-Agnostic State Store for the Web

Managing state in web applications can quickly become complex, especially when dealing with immutability and reactivity. Enter EIS a minimal, framework-agnostic state store designed to be simple, reactive, and immutable. Whether you're building a small app or need a lightweight solution for state management, EIS works seamlessly with vanilla JavaScript, React, Vue, Svelte, and even Node.js.


Why EIS?

EIS is built with simplicity and reliability in mind. It enforces immutability by deep-freezing state, ensuring your data remains predictable and safe from accidental mutations. With just three core methods (get, set, and subscribe), it’s easy to integrate and use, making it perfect for projects where you want to avoid the overhead of larger state management libraries.


Key Features

  • Immutable State: State is always frozen, preventing accidental changes.
  • Deep Freeze & Clone: Recursively freezes nested objects and uses structuredClone (or falls back to JSON methods) for true immutability.
  • Simple API: Only three methods to learn—get, set, and subscribe.
  • Reactive Updates: Subscribe to state changes and react instantly.
  • No Dependencies: Self-contained and lightweight.

Installation

Get started in seconds:

npm install eis
# or
yarn add eis
Enter fullscreen mode Exit fullscreen mode

Or include it directly in your project:

import eis from 'eis';
Enter fullscreen mode Exit fullscreen mode

Example Usage

Here’s how easy it is to use EIS in a React component:

import { useEffect, useState } from 'react';
import eis from 'eis';

const [get, set, subscribe] = eis(0);

function Counter() {
  const [count, setCount] = useState(get());

  useEffect(() => {
    const unsubscribe = subscribe((newState) => {
      setCount(newState);
    }, true);
    return unsubscribe;
  }, []);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => set((state) => state + 1)}>Increment</button>
      <button onClick={() => set((state) => state - 1)}>Decrement</button>
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

Use Cases

  • Simple State Management: Ideal for small to medium apps.
  • Reactive UI Updates: Works with any UI library.
  • Debugging & Testing: Clear error messages and predictable state updates.

Limitations

  • No support for circular references or functions in state.
  • Performance overhead for very large state objects (keep them small or use multiple stores).

Upcoming Features

  • Lazy cloning/freezing for better performance.
  • Automatic state merging with an update method.
  • Comprehensive documentation and tutorials.

Conclusion

EIS is a powerful yet minimal tool for managing state immutably and reactively. Give it a try and star the repo if you find it useful! Contributions and feedback are always welcome.


🔗 GitHub Repository
🌟 Star the repo if you like it!
💬 Share your thoughts or suggestions in the comments.

Top comments (0)