Skip to content

Commit 085dbb0

Browse files
author
Benjamín Eidelman
committed
Update plugins.md
1 parent 959b52c commit 085dbb0

File tree

1 file changed

+63
-1
lines changed

1 file changed

+63
-1
lines changed

docs/plugins.md

Lines changed: 63 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
Plugins
2+
=======
3+
14
```diff()```, ```patch()``` and ```reverse()``` functions are implemented using a pipes &filters pattern, making them extremely customizable by adding or replacing filters.
25

36
Some examples of what you can acheive writing your own filter:
@@ -7,4 +10,63 @@ Some examples of what you can acheive writing your own filter:
710
- implement custom diff mechanisms, like relative numeric deltas
811
- suprise me! :)
912

10-
Check the ```/src/filters``` folder for more example code.
13+
Check the ```/src/filters``` folder for code examples.
14+
15+
Example
16+
------
17+
18+
Here is an example to provide number differences in deltas (when left and right values are both numbers)
19+
This, way when diffing 2 numbers instead of obtaining ```[ oldValue, newValue ] ```, the difference between both values will be saved, this could be useful for counters simultaneously incremented in multiple client applications (patches that both increment a value would be combined, instead of failing with a conflict).
20+
21+
``` javascript
22+
var diffpatcher = jsondiffpatch.create();
23+
var NUMERIC_DIFFERENCE = -8;
24+
25+
var numericDiffFilter = function(context) {
26+
if (typeof context.left === 'number' && typeof context.right === 'number') {
27+
context.setResult([context.left, context.right - context.left, NUMERIC_DIFFERENCE]).exit();
28+
}
29+
};
30+
// a filterName is useful if I want to allow other filters to be inserted before/after this one
31+
numericDiffFilter.filterName = 'numeric';
32+
33+
// check the list of filters for the diff pipe
34+
var list = diffpatcher.processor.pipes.diff.list();
35+
// assertSame(list, ["collectChildren", "trivial", "dates", "texts", "objects", "arrays"]);
36+
37+
// insert my new filter, right before trivial one
38+
diffpatcher.processor.pipes.diff.before('trivial', numericDiffFilter);
39+
40+
// try it
41+
var delta = diffpatcher.diff({ population: 400 }, { population: 403 });
42+
// assertSame(delta, [400, 3, -8]);
43+
44+
```
45+
46+
Now let's make the corresponding patch filter that will handle the new delta type
47+
48+
``` javascript
49+
var numericPatchFilter = function(context) {
50+
if (context.delta && Array.isArray(context.delta) && context.delta[2] === NUMERIC_DIFFERENCE) {
51+
console.log('A number diff!');
52+
context.setResult(context.left + context.delta[1]).exit();
53+
}
54+
};
55+
// a filterName is useful if I want to allow other filters to be inserted before/after this one
56+
numericPatchFilter.filterName = 'numeric';
57+
58+
// check the list of filters for the patch pipe
59+
var list = diffpatcher.processor.pipes.patch.list();
60+
// assertSame(list, ["collectChildren", "arraysCollectChildren", "trivial", "texts", "objects", "arrays"]);
61+
62+
// insert my new filter, right before trivial one
63+
diffpatcher.processor.pipes.patch.before('trivial', numericPatchFilter);
64+
65+
// try it
66+
var right = diffpatcher.patch({ population: 400 }, delta);
67+
// assertSame(right, { population: 403 });
68+
69+
// patch twice!
70+
var right = diffpatcher.patch(right, delta);
71+
// assertSame(right, { population: 406 });
72+
```

0 commit comments

Comments
 (0)