From 391dcad0a054dc26419d148abc83dd8e4ded18c2 Mon Sep 17 00:00:00 2001 From: David Maskasky Date: Thu, 5 Sep 2024 16:31:10 -0700 Subject: [PATCH] Update to version 0.2.1 --- README.md | 33 ++++++++++++++++++++------------- package.json | 2 +- src/withHistory.ts | 2 +- src/withUndo.ts | 7 +++++-- 4 files changed, 27 insertions(+), 17 deletions(-) diff --git a/README.md b/README.md index bd1aad9..fa07556 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # History -[jotai-history](https://jotai.org/docs/integrations/history) is a utility package for advanced state history management +[jotai-history](https://jotai.org/docs/extensions/history) is a utility package for advanced state history management. ## install @@ -13,7 +13,7 @@ npm i jotai-history ### Signature ```ts -function withHistory(targetAtom: Atom, limit: number): Atom +declare 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. @@ -23,14 +23,14 @@ The history atom tracks changes to the `targetAtom` and maintains a list of prev ### Usage -```tsx +```jsx import { atom, useAtomValue, useSetAtom } from 'jotai' import { withHistory } from 'jotai-history' const countAtom = atom(0) const countWithPrevious = withHistory(countAtom, 2) -export function CountComponent() { +function CountComponent() { const [count, previousCount] = useAtomValue(countWithPrevious) const setCount = useSetAtom(countAtom) @@ -49,13 +49,16 @@ export function CountComponent() { ### Signature ```ts -type Undoable = { - undo: Function - redo: Function +type Undoable = { + undo: () => void + redo: () => void canUndo: boolean canRedo: boolean } -function withUndo(targetAtom: PrimitiveAtom, limit: number): Atom +declare function withUndo( + targetAtom: WritableAtom, + limit: number, +): Atom ``` `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. @@ -69,15 +72,20 @@ The returned object includes: ### Usage -```tsx +```jsx import { atom, useAtom, useAtomValue } from 'jotai' import { withUndo } from 'jotai-history' const counterAtom = atom(0) const undoCounterAtom = withUndo(counterAtom, 5) -export function CounterComponent() { - const { undo, redo, canUndo, canRedo } = useAtomValue(undoCounterAtom) +function CounterComponent() { + const { + undo, + redo, + canUndo, + canRedo, + } = useAtomValue(undoCounterAtom) const [value, setValue] = useAtom(counterAtom) return ( @@ -95,8 +103,7 @@ export function CounterComponent() { } ``` -## Example -https://codesandbox.io/p/sandbox/musing-orla-g6qj3q?file=%2Fsrc%2FApp.tsx%3A10%2C23 + ## Memory Management diff --git a/package.json b/package.json index 8169555..4450ba9 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "jotai-history", "description": "👻⌛", - "version": "0.2.0", + "version": "0.2.1", "author": "David Maskasky", "repository": { "type": "git", diff --git a/src/withHistory.ts b/src/withHistory.ts index 4efe019..b511245 100644 --- a/src/withHistory.ts +++ b/src/withHistory.ts @@ -9,7 +9,7 @@ import type { Atom } from 'jotai/vanilla' export function withHistory(targetAtom: Atom, limit: number) { const refAtom = atom( () => ({ history: [] as T[] }), - (get, _set) => () => void (get(refAtom).history.length = 0) + (get) => () => void (get(refAtom).history.length = 0) ) refAtom.onMount = (mount) => mount() refAtom.debugPrivate = true diff --git a/src/withUndo.ts b/src/withUndo.ts index 68ef7b0..777ca83 100644 --- a/src/withUndo.ts +++ b/src/withUndo.ts @@ -1,5 +1,5 @@ import { atom } from 'jotai/vanilla' -import type { PrimitiveAtom } from 'jotai/vanilla' +import type { WritableAtom } from 'jotai/vanilla' import { withHistory } from './withHistory' type Undoable = { @@ -14,7 +14,10 @@ type Undoable = { * @param limit the maximum number of history states to keep * @returns an atom with undo/redo functionality */ -export function withUndo(targetAtom: PrimitiveAtom, limit: number) { +export function withUndo( + targetAtom: WritableAtom, + limit: number +) { const historyAtom = withHistory(targetAtom, limit) const UNDO = Symbol('undo') const REDO = Symbol('redo')