Skip to content

Commit 488fc1c

Browse files
committed
fix: readme
1 parent a397490 commit 488fc1c

File tree

1 file changed

+252
-30
lines changed

1 file changed

+252
-30
lines changed

README.md

Lines changed: 252 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,65 @@
1-
# DATA DIFF
1+
# SUPERDIFF
22

33
This library compares two arrays or objects and return a complete diff of their differences.
44

5-
## Object exemple:
5+
## WHY YOU SHOULD USE THIS LIB
66

7-
`getObjectDiff()` checks base properties but also provides a complete diff of nested properties.
7+
All other existing solutions return a weird diff format which often require an additionnal parsing. They are also limited to object comparison. Some even have CPU spikes issues. 👎
88

9-
Input
9+
**Superdiff** gives you a complete diff for both array <u>and</u> objects with a very readable format. Last but not least, it's battled tested. Import. Enjoy. 👍
10+
11+
## DIFF FORMAT COMPARISON
12+
13+
Let's compare the diff format of **Superdiff** and **Deep-diff**, the most popular diff lib on npm:
14+
15+
input:
1016

1117
```diff
12-
getObjectDiff(
13-
{
14-
id: 54,
15-
user: {
16-
name: "joe",
17-
- member: true,
18-
- hobbies: ["golf", "football"],
19-
age: 66,
20-
},
21-
},
22-
{
23-
id: 54,
24-
user: {
25-
name: "joe",
26-
+ member: false,
27-
+ hobbies: ["golf", "chess"],
28-
age: 66,
29-
},
18+
const objectA = {
19+
id: 54,
20+
user: {
21+
name: "joe",
22+
- member: true,
23+
- hobbies: ["golf", "football"],
24+
age: 66,
25+
},
26+
}
27+
28+
const objectB = {
29+
id: 54,
30+
user: {
31+
name: "joe",
32+
+ member: false,
33+
+ hobbies: ["golf", "chess"],
34+
age: 66,
35+
},
3036
}
31-
);
3237
```
3338

34-
Output
39+
**Deep-Diff**
40+
41+
````js
42+
**Deep-Diff** output:
43+
44+
```js
45+
[
46+
DiffEdit {
47+
kind: 'E',
48+
path: [ 'user', 'member' ],
49+
lhs: true,
50+
rhs: false
51+
},
52+
DiffEdit {
53+
kind: 'E',
54+
path: [ 'user', 'hobbies', 1 ],
55+
lhs: 'football',
56+
rhs: 'chess'
57+
}
58+
]
59+
60+
````
61+
62+
**SuperDiff** output:
3563
3664
```diff
3765
{
@@ -90,12 +118,81 @@ Output
90118
}
91119
```
92120

93-
## List exemple:
121+
## FEATURES
122+
123+
**Superdiff** exports 4 functions:
124+
125+
### getObjectDiff()
126+
127+
compare two objects and return a diff for each value and their potential subvalues:
128+
129+
- property name
130+
- status: added, deleted, equal, updated
131+
- previous value, current value
132+
- supports deeply nested objects with any kind of values
133+
134+
format:
135+
136+
```
137+
type ObjectDiff = {
138+
type: "object";
139+
status: "added" | "deleted" | "equal" | "moved" | "updated";
140+
diff: {
141+
property: string;
142+
previousValue: any;
143+
currentValue: any;
144+
status: "added" | "deleted" | "equal" | "moved" | "updated";
145+
subPropertiesDiff?: {
146+
name: string;
147+
previousValue: any;
148+
currentValue: any;
149+
status: "added" | "deleted" | "equal" | "moved" | "updated";
150+
// subDiff is a recursive diff in case of nested subproperties
151+
subDiff?: Subproperties[];
152+
}[];
153+
}[];
154+
}
155+
```
156+
157+
### getListDiff()
158+
159+
compare two arrays and return a diff for each value:
160+
161+
- index change: previous index, current index, index difference
162+
- status: added, deleted, equal, moved, updated
163+
- previous value, current value
164+
- supports array of primitive values and objects
165+
- ⚠️ doesn't support yet duplicated values comparison (but will soon)
166+
167+
format:
168+
169+
```
170+
type ListDiff = {
171+
type: "list";
172+
status: "added" | "deleted" | "equal" | "moved" | "updated";
173+
diff: {
174+
value: any;
175+
prevIndex: number | null;
176+
newIndex: number | null;
177+
indexDiff: number | null;
178+
status: "added" | "deleted" | "equal" | "moved" | "updated";
179+
}[];
180+
};
181+
```
94182
95-
`getListDiff()` works with arrays of string, number and objects.
96-
It doesn't work yet with duplicated values.
183+
### isEqual()
97184
98-
Input
185+
check if two values are equal.
186+
187+
### isObject()
188+
189+
check if a value is an object.
190+
191+
## EXAMPLES
192+
193+
### getListDiff()
194+
195+
input
99196
100197
```diff
101198
getListDiff(
@@ -104,7 +201,7 @@ getListDiff(
104201
);
105202
```
106203
107-
Output
204+
output
108205
109206
```diff
110207
{
@@ -150,4 +247,129 @@ Output
150247
}
151248
```
152249
153-
See tests for more visual examples.
250+
### getObjectDiff()
251+
252+
input
253+
254+
```diff
255+
getObjectDiff(
256+
{
257+
id: 54,
258+
user: {
259+
name: "joe",
260+
- member: true,
261+
- hobbies: ["golf", "football"],
262+
age: 66,
263+
},
264+
},
265+
{
266+
id: 54,
267+
user: {
268+
name: "joe",
269+
+ member: false,
270+
+ hobbies: ["golf", "chess"],
271+
age: 66,
272+
},
273+
}
274+
);
275+
```
276+
277+
output
278+
279+
```diff
280+
{
281+
type: "object",
282+
+ status: "updated",
283+
diff: [
284+
{
285+
property: "id",
286+
previousValue: 54,
287+
currentValue: 54,
288+
status: "equal",
289+
},
290+
{
291+
property: "user",
292+
previousValue: {
293+
name: "joe",
294+
member: true,
295+
hobbies: ["golf", "football"],
296+
age: 66,
297+
},
298+
currentValue: {
299+
name: "joe",
300+
member: false,
301+
hobbies: ["golf", "chess"],
302+
age: 66,
303+
},
304+
+ status: "updated",
305+
subPropertiesDiff: [
306+
{
307+
name: "name",
308+
previousValue: "joe",
309+
currentValue: "joe",
310+
status: "equal",
311+
},
312+
+ {
313+
+ name: "member",
314+
+ previousValue: true,
315+
+ currentValue: false,
316+
+ status: "updated",
317+
+ },
318+
+ {
319+
+ name: "hobbies",
320+
+ previousValue: ["golf", "football"],
321+
+ currentValue: ["golf", "chess"],
322+
+ status: "updated",
323+
+ },
324+
{
325+
name: "age",
326+
previousValue: 66,
327+
currentValue: 66,
328+
status: "equal",
329+
},
330+
],
331+
},
332+
],
333+
}
334+
```
335+
336+
### isEqual()
337+
338+
```js
339+
isEqual(
340+
[
341+
{ name: "joe", age: 99 },
342+
{ name: "nina", age: 23 },
343+
],
344+
[
345+
{ name: "joe", age: 98 },
346+
{ name: "nina", age: 23 },
347+
]
348+
);
349+
```
350+
351+
output
352+
353+
```js
354+
false;
355+
```
356+
357+
### isObject()
358+
359+
input
360+
361+
```js
362+
isObject(["hello", "world"]);
363+
```
364+
365+
output
366+
367+
```js
368+
false;
369+
```
370+
371+
More examples are availble in the tests of the source code.
372+
373+
##CREDITS
374+
375+
DoneDeal0

0 commit comments

Comments
 (0)