Skip to content

Commit 723f784

Browse files
Alexander Bzendive
Alexander B
authored and
zendive
committed
let it be
1 parent 1fab201 commit 723f784

File tree

10 files changed

+1186
-1
lines changed

10 files changed

+1186
-1
lines changed

‎.gitignore‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,3 +57,8 @@ typings/
5757
# dotenv environment variables file
5858
.env
5959

60+
# ide
61+
.idea
62+
63+
# os
64+
.DS_Store

‎README.md‎

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,22 @@
1-
# jsdiff
1+
# jsdiff
2+
Show diff between 2 objects in a popup window
3+
4+
Example
5+
====
6+
![screenshot](./doc/screenshot.png)
7+
8+
```javascript
9+
// api is exposed to global context
10+
jsdiff.show(objLeft, objRight);
11+
12+
// and/or could be used as amd module
13+
define(['path/to/jsdiff'], function (jsdiff) {
14+
jsdiff.show(objLeft, objRight);
15+
});
16+
```
17+
18+
Could be useful while comparing complex objects with big amount of data.
19+
20+
Based on
21+
====
22+
[jsondiffpatch](https://github.com/benjamine/jsondiffpatch) by benjamine

‎doc/screenshot.png‎

28.3 KB
Loading

‎jsdiff.js‎

Lines changed: 600 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎lib/jsondiffpatch-formatters.min.js‎

Lines changed: 405 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎lib/jsondiffpatch-full.min.js‎

Lines changed: 43 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎test/index.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>jsdiff test</title>
6+
<style>
7+
.jsondiffpatch-delta{font-family:monospace;font-size:12px;margin:0;padding:0 0 0 12px;display:inline-block}.jsondiffpatch-delta pre{font-family:monospace;font-size:12px;margin:0;padding:0;display:inline-block}ul.jsondiffpatch-delta{list-style-type:none;padding:0 0 0 20px;margin:0}.jsondiffpatch-delta ul{list-style-type:none;padding:0 0 0 20px;margin:0}.jsondiffpatch-added .jsondiffpatch-property-name,.jsondiffpatch-added .jsondiffpatch-value pre,.jsondiffpatch-modified .jsondiffpatch-right-value pre,.jsondiffpatch-textdiff-added{background:#bfb}.jsondiffpatch-deleted .jsondiffpatch-property-name,.jsondiffpatch-deleted pre,.jsondiffpatch-modified .jsondiffpatch-left-value pre,.jsondiffpatch-textdiff-deleted{background:#fbb;text-decoration:line-through}.jsondiffpatch-unchanged,.jsondiffpatch-movedestination{color:gray}.jsondiffpatch-unchanged,.jsondiffpatch-movedestination>.jsondiffpatch-value{transition:all 0.5s;-webkit-transition:all 0.5s;overflow-y:hidden}.jsondiffpatch-unchanged-showing .jsondiffpatch-unchanged,.jsondiffpatch-unchanged-showing .jsondiffpatch-movedestination>.jsondiffpatch-value{max-height:100px}.jsondiffpatch-unchanged-hidden .jsondiffpatch-unchanged,.jsondiffpatch-unchanged-hidden .jsondiffpatch-movedestination>.jsondiffpatch-value{max-height:0}.jsondiffpatch-unchanged-hiding .jsondiffpatch-movedestination>.jsondiffpatch-value,.jsondiffpatch-unchanged-hidden .jsondiffpatch-movedestination>.jsondiffpatch-value{display:block}.jsondiffpatch-unchanged-visible .jsondiffpatch-unchanged,.jsondiffpatch-unchanged-visible .jsondiffpatch-movedestination>.jsondiffpatch-value{max-height:100px}.jsondiffpatch-unchanged-hiding .jsondiffpatch-unchanged,.jsondiffpatch-unchanged-hiding .jsondiffpatch-movedestination>.jsondiffpatch-value{max-height:0}.jsondiffpatch-unchanged-showing .jsondiffpatch-arrow,.jsondiffpatch-unchanged-hiding .jsondiffpatch-arrow{display:none}.jsondiffpatch-value{display:inline-block}.jsondiffpatch-property-name{display:inline-block;padding-right:5px;vertical-align:top}.jsondiffpatch-property-name:after{content:': '}.jsondiffpatch-child-node-type-array>.jsondiffpatch-property-name:after{content:': ['}.jsondiffpatch-child-node-type-array:after{content:'],'}div.jsondiffpatch-child-node-type-array:before{content:'['}div.jsondiffpatch-child-node-type-array:after{content:']'}.jsondiffpatch-child-node-type-object>.jsondiffpatch-property-name:after{content:': {'}.jsondiffpatch-child-node-type-object:after{content:'},'}div.jsondiffpatch-child-node-type-object:before{content:'{'}div.jsondiffpatch-child-node-type-object:after{content:'}'}.jsondiffpatch-value pre:after{content:','}li:last-child>.jsondiffpatch-value pre:after,.jsondiffpatch-modified>.jsondiffpatch-left-value pre:after{content:''}.jsondiffpatch-modified .jsondiffpatch-value{display:inline-block}.jsondiffpatch-modified .jsondiffpatch-right-value{margin-left:5px}.jsondiffpatch-moved .jsondiffpatch-value{display:none}.jsondiffpatch-moved .jsondiffpatch-moved-destination{display:inline-block;background:#ffb;color:#888}.jsondiffpatch-moved .jsondiffpatch-moved-destination:before{content:' => '}ul.jsondiffpatch-textdiff{padding:0}.jsondiffpatch-textdiff-location{color:#bbb;display:inline-block;min-width:60px}.jsondiffpatch-textdiff-line{display:inline-block}.jsondiffpatch-textdiff-line-number:after{content:','}.jsondiffpatch-error{background:red;color:white;font-weight:700}
8+
</style>
9+
</head>
10+
<body>
11+
<div id="root"></div>
12+
<script data-main="js/main.js" src="js/require.2.3.5.min.js"></script>
13+
</body>
14+
</html>

‎test/js/main.js‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
require.config({
2+
baseUrl: '../',
3+
waitSeconds: 30,
4+
paths: {},
5+
shim: {}
6+
});
7+
8+
require([
9+
'test/js/vue.min',
10+
'jsdiff'
11+
], function (Vue, jsdiff) {
12+
"use strict";
13+
14+
// language=Vue
15+
new Vue({
16+
el: '#root',
17+
template: `
18+
<div>
19+
<div is="row"
20+
v-for="(test, i) in testCase"
21+
:key="i"
22+
:test="test"
23+
></div>
24+
</div>
25+
`,
26+
data() {
27+
var l1 = {
28+
a: 'A',
29+
b: [100, 200, 300],
30+
c: {
31+
ca: 'Latin',
32+
cb: [101, 202, 303]
33+
},
34+
d: /abcd/
35+
};
36+
var r1 = {
37+
a: 'A',
38+
b: [100, 200, 300],
39+
c: {
40+
ca: 'עברית',
41+
cb: [101, 202, 303, 404],
42+
'0_o': {ff: 'ff'}
43+
},
44+
d: /abcd/i
45+
};
46+
47+
var l2 = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. In lorem mi, rutrum quis suscipit eu, blandit malesuada magna. Interdum et malesuada fames ac ante ipsum primis in faucibus.';
48+
var r2 = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. In lorem mi, rutrum quis suscipit eu, blandit malesuada manna. Interdum et malesuada fames ac ante ipsum primis in faucibus.';
49+
50+
var l3 = [l1, l2];
51+
var r3 = [r1, r2];
52+
53+
return {
54+
testCase: [
55+
{left: l1, right: r1},
56+
{left: l2, right: r2},
57+
{left: l3, right: r3}
58+
]
59+
};
60+
},
61+
62+
components: {
63+
row: {
64+
props: {
65+
test: {type: Object}
66+
},
67+
template: `
68+
<div>
69+
<hr/>
70+
Delta: <div><code>{{delta}}</code></div>
71+
HTML: <div v-html="html"></div>
72+
<button @click="popup">Invoke popup...</button>
73+
</div>`,
74+
computed: {
75+
delta() {return jsdiff.delta(this.test.left, this.test.right);},
76+
html() {return jsdiff.html(this.test.left, this.test.right);}
77+
},
78+
methods: {
79+
popup() {
80+
jsdiff.show(this.test.left, this.test.right);
81+
}
82+
}
83+
}
84+
}
85+
});
86+
});

‎test/js/require.2.3.5.min.js‎

Lines changed: 5 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎test/js/vue.min.js‎

Lines changed: 6 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)