https://github.com/fi3ework/histor
💾 Save the history mutation of state.
https://github.com/fi3ework/histor
Last synced: 18 days ago
JSON representation
💾 Save the history mutation of state.
- Host: GitHub
- URL: https://github.com/fi3ework/histor
- Owner: fi3ework
- License: mit
- Created: 2019-02-16T15:31:38.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2019-02-17T09:07:47.000Z (over 7 years ago)
- Last Synced: 2024-10-19T19:58:21.112Z (over 1 year ago)
- Language: TypeScript
- Homepage:
- Size: 120 KB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# histor
histor is a enhancer to watch the deep change of an object and tell the detail of the change.
## Install
```bash
$ yarn add histor
```
or
```bash
$ npm i histor
```
## Usage
### histor(object, onChange)
Accept an object and a `onChange` callback function. The callback function will be called if any part of the object is changed.
The `onChange` callback will receive a change detail whose type is:
```ts
interface IDiff {
path: (string | number)[] // the path chain of the changed key
from: any // previous value before change of the prop
to: any // current value after change of the prop
}
```
Example:
```ts
import histor from 'histor'
const person = {
name: 'wee',
skills: ['eat', 'sleep'],
pets: {
cat: {
name: 'c1'
},
dog: 'd1'
}
}
const p = histor(person, diff => {
console.log(`$${diff.path.map(p => `[${p}]`).join('')}: ${diff.from} ==> ${diff.to}`)
})
person.pets.cat.name = 'c2'
// it will log:
// `$[pets][cat][name]: c1 ==> c2`
```
## ⚠️ CAVEAT
- The change diff will just keep a reference to the changed value. So if the new value or the new value has been changed deeply afterward. The previous diff will be changed at the same time. So it's better to serialize the diff to make it immutable.
## Thanks
Inspired by [on-change](https://github.com/sindresorhus/on-change).
## License
MIT