Microscope Immer 🔬

Immer.js integration for Microscope.

Table of Contents

• 📦 Installation
• ⚡ Usage

Installation

npm install immer @sterra/microscope-immer
# or
yarn add immer @sterra/microscope-immer
# or
pnpm add immer @sterra/microscope-immer

Usage

Before:

import { store } from "@sterra/microscope";

interface Todo {
  text: string;
  done: boolean;
  id: string;
}

const $todos = store<Todo[]>([]);

function addTodo(text: string) {
  const id = crypto.createUUID();
  const newTodo = { id, text, done: false };

  $todos.set((prev) => {
    return [...prev, newTodo];
  });
}

After

import { store } from "@sterra/microscope";
import { withImmer } from "@sterra/microscope-immer";

interface Todo {
  text: string;
  done: boolean;
  id: string;
}

const $todos = store<Todo[]>([]);

function addTodo(text: string) {
  const id = crypto.createUUID();
  const newTodo = { id, text, done: false };

  $todos.set((draft) => {
    draft.push(newTodo);
  });
}