Nanostores Immer

Immer integration for nanostores, providing immutable state updates with mutable syntax.

Small. Zero dependencies except for nanostores and immer.
Simple. Just use mut() method to update state with Immer.
Type Safe. Written in TypeScript with good type inference.

import { atom } from '@illuxiza/nanostores-immer'

// Create a store
const $users = atom({ 
  admins: [
    { id: 1, name: 'John' }
  ],
  users: [
    { id: 2, name: 'Jane' }
  ]
})

// Update with Immer's mutable syntax
$users.mut(draft => {
  draft.admins.push({ id: 3, name: 'Bob' })
  draft.users[0].name = 'Jane Doe'
})

Install

npm install @illuxiza/nanostores-immer

Usage

Basic Usage

Import the atom from this package instead of nanostores:

import { atom } from '@illuxiza/nanostores-immer'

const $store = atom({ count: 0 })

// Update state with Immer
$store.mut(draft => {
  draft.count++
})

// Regular updates still work
$store.set({ count: 2 })

With React

import { useStore } from '@nanostores/react'
import { atom } from '@illuxiza/nanostores-immer'

const $todos = atom([
  { id: 1, text: 'Buy milk', done: false }
])

export const TodoList = () => {
  const todos = useStore($todos)
  
  const toggleTodo = (id: number) => {
    $todos.mut(draft => {
      const todo = draft.find(t => t.id === id)
      if (todo) todo.done = !todo.done
    })
  }

  return (
    <ul>
      {todos.map(todo => (
        <li key={todo.id} onClick={() => toggleTodo(todo.id)}>
          {todo.text} {todo.done ? '✓' : ''}
        </li>
      ))}
    </ul>
  )
}

TypeScript Support

The package is written in TypeScript and provides good type inference:

interface User {
  id: number
  name: string
  settings: {
    theme: 'light' | 'dark'
    notifications: boolean
  }
}

const $user = atom<User>({
  id: 1,
  name: 'John',
  settings: {
    theme: 'light',
    notifications: true
  }
})

// TypeScript will ensure type safety
$user.mut(draft => {
  draft.settings.theme = 'dark' // ✓ OK
  draft.settings.theme = 'blue' // ✗ Type Error
})

License

MIT

Credits

Nanostores - The original state manager
Immer - Immutable state with a mutable API