Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Add lerna - Upgrade dependencies - Remove hook from tree-changes. package - Add tree-changes-hook package
- Loading branch information
1 parent
c6b8d2e
commit dc72210
Showing
29 changed files
with
18,585 additions
and
13,497 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,278 +1,16 @@ | ||
| # tree-changes | ||
|
|
||
| [](https://www.npmjs.com/package/tree-changes) [](https://travis-ci.org/gilbarbara/tree-changes) [](https://codeclimate.com/github/gilbarbara/tree-changes/maintainability) [](https://codeclimate.com/github/gilbarbara/tree-changes/test_coverage) | ||
|
|
||
| Compare changes between two datasets. | ||
|
|
||
| ## Setup | ||
|
|
||
| ```bash | ||
| npm install tree-changes | ||
| ``` | ||
|
|
||
| > React is an optional dependency and npm install it by default. | ||
| > If you don't need it, just add `--no-optional` when installing this package. | ||
| ## Usage | ||
|
|
||
| ```typescript | ||
| import treeChanges from 'tree-changes'; | ||
|
|
||
| const previousData = { | ||
| hasData: false, | ||
| sort: { | ||
| data: [{ type: 'asc' }, { type: 'desc' }], | ||
| status: 'idle', | ||
| }, | ||
| }; | ||
|
|
||
| const newData = { | ||
| hasData: true, | ||
| sort: { | ||
| data: [{ type: 'desc' }, { type: 'asc' }], | ||
| status: 'success', | ||
| }, | ||
| }; | ||
|
|
||
| const { changed, changedFrom } = treeChanges(previousData, newData); | ||
|
|
||
| changed(); // true | ||
|
|
||
| changed('hasData'); // true | ||
| changed('hasData', true); // true | ||
| changed('hasData', true, false); // true | ||
|
|
||
| // support nested matches. with dot notation | ||
| changed('sort.data.0.type', 'desc'); // true | ||
|
|
||
| // works with array values too | ||
| changed('sort.status', ['done', 'success']); // true | ||
|
|
||
| // if you only need to know the previous value | ||
| changedFrom('sort.status', 'idle'); // true | ||
| ``` | ||
|
|
||
| #### Works with arrays too. | ||
|
|
||
| ```typescript | ||
| import treeChanges from 'tree-changes'; | ||
|
|
||
| const { changed } = treeChanges([0, { id: 2 }], [0, { id: 4 }]); | ||
|
|
||
| changed(); // true | ||
| changed(0); // false | ||
| changed(1); // true | ||
| changed('1.id', 4); // true | ||
| ``` | ||
|
|
||
| > It uses [fast-deep-equal](https://github.com/epoberezkin/fast-deep-equal) to compare properties. | ||
| ## API | ||
|
|
||
| **added**(`key: Key`, `value?: Value`) | ||
| Check if something was added to the data. | ||
| Works with arrays and objects (using Object.keys). | ||
|
|
||
| ```typescript | ||
| import treeChanges from 'tree-changes'; | ||
|
|
||
| const previousData = { | ||
| actions: {}, | ||
| messages: [], | ||
| }; | ||
|
|
||
| const newData = { | ||
| actions: { complete: true }, | ||
| messages: ['New Message'], | ||
| sudo: true, | ||
| }; | ||
|
|
||
| const { added } = treeChanges(previousData, newData); | ||
|
|
||
| added(); // true | ||
| added('actions'); // true | ||
| added('messages'); // true | ||
| added('sudo'); // true | ||
| ``` | ||
|
|
||
| **changed**(`key?: Key`, `actual?: Value`, `previous?: Value`) | ||
| Check if the data has changed. | ||
| It also can compare to the `actual` value or even with the `previous`. | ||
|
|
||
| **changedFrom**(`key: Key`, `previous: Value`, `actual?: Value`) | ||
| Check if the data has changed from `previous` or from `previous` to `actual`. | ||
|
|
||
| **decreased**(`key: Key`, `actual?: Value`, `previous?: Value`) | ||
| Check if both values are numbers and the value has decreased. | ||
| It also can compare to the `actual` value or even with the `previous`. | ||
|
|
||
| ```typescript | ||
| import treeChanges from 'tree-changes'; | ||
|
|
||
| const previousData = { | ||
| ratio: 0.9, | ||
| retries: 0, | ||
| }; | ||
|
|
||
| const newData = { | ||
| ratio: 0.5, | ||
| retries: 1, | ||
| }; | ||
|
|
||
| const { decreased } = treeChanges(previousData, newData); | ||
|
|
||
| decreased('ratio'); // true | ||
| decreased('retries'); // false | ||
| ``` | ||
|
|
||
| **emptied**(`key: Key`) | ||
| Check if the data was emptied. Works with arrays, objects and strings. | ||
|
|
||
| ```typescript | ||
| import treeChanges from 'tree-changes'; | ||
|
|
||
| const previousData = { | ||
| data: { a: 1 }, | ||
| items: [{ name: 'test' }], | ||
| missing: 'username', | ||
| }; | ||
|
|
||
| const newData = { | ||
| data: {}, | ||
| items: [], | ||
| missing: '', | ||
| }; | ||
|
|
||
| const { emptied } = treeChanges(previousData, newData); | ||
|
|
||
| emptied('data'); // true | ||
| emptied('items'); // true | ||
| emptied('missing'); // true | ||
| ``` | ||
|
|
||
| **filled**(`key: Key`) | ||
| Check if the data was filled (from a previous empty value). Works with arrays, objects and strings. | ||
|
|
||
| ```typescript | ||
| import treeChanges from 'tree-changes'; | ||
|
|
||
| const previousData = { | ||
| actions: {}, | ||
| messages: [], | ||
| username: '', | ||
| }; | ||
|
|
||
| const newData = { | ||
| actions: { complete: true }, | ||
| messages: ['New Message'], | ||
| username: 'John', | ||
| }; | ||
|
|
||
| const { filled } = treeChanges(previousData, newData); | ||
|
|
||
| filled('actions'); // true | ||
| filled('messages'); // true | ||
| filled('username'); // true | ||
| ``` | ||
|
|
||
| **increased**(`key: Key`, `actual?: Value`, `previous?: Value`) | ||
| Check if both values are numbers and the value has increased. | ||
| It also can compare to the `actual` value or even with the `previous`. | ||
|
|
||
| ```typescript | ||
| import treeChanges from 'tree-changes'; | ||
|
|
||
| const previousData = { | ||
| ratio: 0.9, | ||
| retries: 0, | ||
| }; | ||
|
|
||
| const newData = { | ||
| ratio: 0.5, | ||
| retries: 1, | ||
| }; | ||
|
|
||
| const { increased } = treeChanges(previousData, newData); | ||
|
|
||
| increased('retries'); // true | ||
| increased('ratio'); // false | ||
| ``` | ||
|
|
||
| **removed**(`key: Key`, `value?: Value`) | ||
| Check if something was removed from the data. | ||
| Works with arrays and objects (using Object.keys). | ||
|
|
||
| ```typescript | ||
| import treeChanges from 'tree-changes'; | ||
|
|
||
| const previousData = { | ||
| data: { a: 1 }, | ||
| items: [{ name: 'test' }], | ||
| switch: false, | ||
| }; | ||
|
|
||
| const newData = { | ||
| data: {}, | ||
| items: [], | ||
| }; | ||
|
|
||
| const { removed } = treeChanges(previousData, newData); | ||
|
|
||
| removed(); // true | ||
| removed('data'); // true | ||
| removed('items'); // true | ||
| removed('switch'); // true | ||
| ``` | ||
|
|
||
| > **Types** | ||
| > type Key = string | number; | ||
| > type ValidTypes = string | boolean | number | Record<string, any> }; | ||
| > type Value = ValidTypes | ValidTypes[]; | ||
| ## With React | ||
|
|
||
| ### Functional components with hooks | ||
|
|
||
| ```typescript jsx | ||
| import React from 'react'; | ||
| import useTreeChanges from 'tree-changes/lib/hook'; | ||
|
|
||
| function App(props) { | ||
| const { changed } = useTreeChanges(props); | ||
|
|
||
| React.useEffect(() => { | ||
| if (changed('hasData', true)) { | ||
| sendAnalyticsEvent('load', 'MySuperPage'); | ||
| } | ||
| }); | ||
|
|
||
| return <div>...</div>; | ||
| } | ||
| ``` | ||
|
|
||
| > It's safe to run all the methods with a `useEffect` without dependencies but it works with them too. | ||
| ### Class components | ||
|
|
||
| ```typescript jsx | ||
| import treeChanges from 'tree-changes'; | ||
|
|
||
| class App extends React.Component { | ||
| componentDidUpdate(prevProps) { | ||
| const { changed, increased } = treeChanges(prevProps, this.props); | ||
| ## Packages | ||
|
|
||
| if (increased('retries')) { | ||
| // dispatch some error | ||
| } | ||
| This repository is a monorepo managed with [Lerna](https://github.com/lerna/lerna). We actually publish [several packages](https://github.com/gilbarbara/tree-changes/blob/master/packages) to npm from the same codebase, including: | ||
|
|
||
| if (changed('hasData', true)) { | ||
| // send data to analytics or something. | ||
| } | ||
| } | ||
| ... | ||
| } | ||
| ``` | ||
| | Package | Version | Description | | ||
| | ----------------------------------------------- | ------------------------------------------------------------ | ------------------------------------ | | ||
| | [tree-changes](packages/tree-changes) | [](https://www.npmjs.com/package/tree-changes) | Compare changes between two datasets | | ||
| | [tree-changes-hook](packages/tree-changes-hook) | [](https://www.npmjs.com/package/tree-changes-hook) | React hook for tree-changes | | ||
|
|
||
| ## License | ||
| ## Changes | ||
|
|
||
| MIT | ||
| Detailed release notes for a given version can be found in the [releases page](https://github.com/gilbarbara/tree-changes/releases). |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| { | ||
| "packages": [ | ||
| "packages/*" | ||
| ], | ||
| "version": "0.6.1" | ||
| } |
Oops, something went wrong.