diff --git a/README.md b/README.md index 70f2ed9..bd1aad9 100644 --- a/README.md +++ b/README.md @@ -8,12 +8,12 @@ npm i jotai-history ``` -## atomWithHistory +## withHistory ### Signature ```ts -function atomWithHistory(targetAtom: Atom, limit: number): Atom +function withHistory(targetAtom: Atom, limit: number): Atom ``` This function creates an atom that keeps a history of states for a given `targetAtom`. The `limit` parameter determines the maximum number of history states to keep. @@ -25,10 +25,10 @@ The history atom tracks changes to the `targetAtom` and maintains a list of prev ```tsx import { atom, useAtomValue, useSetAtom } from 'jotai' -import { atomWithHistory } from 'jotai/utils' +import { withHistory } from 'jotai-history' const countAtom = atom(0) -const countWithPrevious = atomWithHistory(countAtom, 2) +const countWithPrevious = withHistory(countAtom, 2) export function CountComponent() { const [count, previousCount] = useAtomValue(countWithPrevious) @@ -44,7 +44,7 @@ export function CountComponent() { } ``` -## atomWithUndo +## withUndo ### Signature @@ -55,10 +55,10 @@ type Undoable = { canUndo: boolean canRedo: boolean } -function atomWithUndo(targetAtom: PrimitiveAtom, limit: number): Atom +function withUndo(targetAtom: PrimitiveAtom, limit: number): Atom ``` -`atomWithHistory` provides undo and redo capabilities for an atom. It keeps track of the value history of `targetAtom` and provides methods to move back and forth through that history. +`withHistory` provides undo and redo capabilities for an atom. It keeps track of the value history of `targetAtom` and provides methods to move back and forth through that history. The returned object includes: @@ -71,10 +71,10 @@ The returned object includes: ```tsx import { atom, useAtom, useAtomValue } from 'jotai' -import { atomWithUndo } from 'jotai/utils' +import { withUndo } from 'jotai-history' const counterAtom = atom(0) -const undoCounterAtom = atomWithUndo(counterAtom, 5) +const undoCounterAtom = withUndo(counterAtom, 5) export function CounterComponent() { const { undo, redo, canUndo, canRedo } = useAtomValue(undoCounterAtom) @@ -100,4 +100,4 @@ https://codesandbox.io/p/sandbox/musing-orla-g6qj3q?file=%2Fsrc%2FApp.tsx%3A10%2 ## Memory Management -⚠️ Since `atomWithHistory` and `atomWithUndo` keeps a history of states, it's important to manage memory by setting a reasonable `limit`. Excessive history can lead to memory bloat, especially in applications with frequent state updates. +⚠️ Since `withHistory` and `withUndo` keeps a history of states, it's important to manage memory by setting a reasonable `limit`. Excessive history can lead to memory bloat, especially in applications with frequent state updates. diff --git a/__tests__/atomWithHistory.test.ts b/__tests__/atomWithHistory.test.ts index 4389d1b..22291ac 100644 --- a/__tests__/atomWithHistory.test.ts +++ b/__tests__/atomWithHistory.test.ts @@ -1,8 +1,8 @@ import { atom, createStore } from 'jotai/vanilla' import type { Atom, PrimitiveAtom } from 'jotai/vanilla' -import { atomWithHistory } from '../src/atomWithHistory' +import { withHistory } from '../src/withHistory' -describe('atomWithHistory', () => { +describe('withHistory', () => { let store: ReturnType let baseAtom: PrimitiveAtom let historyAtom: Atom @@ -11,7 +11,7 @@ describe('atomWithHistory', () => { beforeEach(() => { store = createStore() baseAtom = atom(0) // Initial value is 0 - historyAtom = atomWithHistory(baseAtom, 3) // Limit history to 3 entries + historyAtom = withHistory(baseAtom, 3) // Limit history to 3 entries unsub = store.sub(historyAtom, () => {}) // Subscribe to trigger onMount }) diff --git a/__tests__/atomWithUndo.test.ts b/__tests__/atomWithUndo.test.ts index 1d886c4..8df5647 100644 --- a/__tests__/atomWithUndo.test.ts +++ b/__tests__/atomWithUndo.test.ts @@ -1,11 +1,11 @@ import { atom, createStore } from 'jotai/vanilla' import type { PrimitiveAtom } from 'jotai/vanilla' -import { atomWithUndo } from '../src/atomWithUndo' +import { withUndo } from '../src/withUndo' -describe('atomWithUndo', () => { +describe('withUndo', () => { let store: ReturnType let baseAtom: PrimitiveAtom - let undoableAtom: ReturnType> + let undoableAtom: ReturnType> let unsub: () => void const undoable = { undo() { @@ -25,7 +25,7 @@ describe('atomWithUndo', () => { beforeEach(() => { store = createStore() baseAtom = atom(0) - undoableAtom = atomWithUndo(baseAtom, 3) // Limit history to 3 entries + undoableAtom = withUndo(baseAtom, 3) // Limit history to 3 entries unsub = store.sub(undoableAtom, () => {}) // Subscribe to trigger onMount }) diff --git a/examples/01_typescript/src/App.tsx b/examples/01_typescript/src/App.tsx index 578bfb3..c4f6fac 100644 --- a/examples/01_typescript/src/App.tsx +++ b/examples/01_typescript/src/App.tsx @@ -1,10 +1,10 @@ import React from 'react' import { useAtom, useAtomValue } from 'jotai/react' import { atom } from 'jotai/vanilla' -import { atomWithUndo } from 'jotai-history' +import { withUndo } from 'jotai-history' const searchTextAtom = atom('') -const undoRedoAtom = atomWithUndo(searchTextAtom, 10) +const undoRedoAtom = withUndo(searchTextAtom, 10) function UndoRedoControls() { const { undo, redo, canUndo, canRedo } = useAtomValue(undoRedoAtom) diff --git a/src/index.ts b/src/index.ts index 73219eb..66fae48 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,2 +1,2 @@ -export { atomWithHistory } from './atomWithHistory' -export { atomWithUndo } from './atomWithUndo' +export { withHistory } from './withHistory' +export { withUndo } from './withUndo' diff --git a/src/atomWithHistory.ts b/src/withHistory.ts similarity index 88% rename from src/atomWithHistory.ts rename to src/withHistory.ts index 78a53d3..4efe019 100644 --- a/src/atomWithHistory.ts +++ b/src/withHistory.ts @@ -6,7 +6,7 @@ import type { Atom } from 'jotai/vanilla' * @param limit the maximum number of history states to keep * @returns an atom with an array of history states */ -export function atomWithHistory(targetAtom: Atom, limit: number) { +export function withHistory(targetAtom: Atom, limit: number) { const refAtom = atom( () => ({ history: [] as T[] }), (get, _set) => () => void (get(refAtom).history.length = 0) diff --git a/src/atomWithUndo.ts b/src/withUndo.ts similarity index 93% rename from src/atomWithUndo.ts rename to src/withUndo.ts index 139c302..68ef7b0 100644 --- a/src/atomWithUndo.ts +++ b/src/withUndo.ts @@ -1,6 +1,6 @@ import { atom } from 'jotai/vanilla' import type { PrimitiveAtom } from 'jotai/vanilla' -import { atomWithHistory } from './atomWithHistory' +import { withHistory } from './withHistory' type Undoable = { undo: () => void @@ -14,8 +14,8 @@ type Undoable = { * @param limit the maximum number of history states to keep * @returns an atom with undo/redo functionality */ -export function atomWithUndo(targetAtom: PrimitiveAtom, limit: number) { - const historyAtom = atomWithHistory(targetAtom, limit) +export function withUndo(targetAtom: PrimitiveAtom, limit: number) { + const historyAtom = withHistory(targetAtom, limit) const UNDO = Symbol('undo') const REDO = Symbol('redo') type DoAction = typeof UNDO | typeof REDO