Helios/diff.js at master · Front-Street/Helios · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
const observableDiff = require("deep-diff").observableDiff;
const output = document.querySelector(".state-output");
let counter = 0;
chrome.devtools.panels.create(
  "Apollo State Debugger",
  "time_travel.png",
  "devtools.html",
  function(panel) {
    output.innerHTML += ``;
  }
);
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
  if (request.msg === "state_changed") {
    let lhs = request.data.state[0];
    let rhs = request.data.state[1];
    var entries = [];
    var additions = [];
    var edits = [];
    var deletions = [];
    observableDiff(lhs, rhs, change => {
      switch (change.kind) {
        case "N":
          additions.push(`<p class="change"><span class="addition">Added:</span> ${
            change.path[change.path.length - 1]
          }
        : <em> ${JSON.stringify(change.rhs)}
        </em> </p>`);
          break;
        case "D":
          deletions.push(`<p><span class="deletion">Removed:</span> ${
            change.path[change.path.length - 1]
          } <del>
        : <em>${JSON.stringify(change.lhs)}
        </em></del> </p>`);
          break;
        case "E":
          edits.push(`<p><span class="edit">Edited:</span> ${
            change.path[change.path.length - 1]
          }: <del><em>${JSON.stringify(
            change.lhs
          )}</em></del>   <strong>&rarr;</strong> ${
            change.path[change.path.length - 1]
          }
        : <em>${JSON.stringify(change.rhs)}
        </em> </p>`);
          break;
        case "A": // Don't output anything for the array case
          // output.innerHTML += `Change within array`;
          break;
      }
    });
    if (additions.length > 0)
      entries.push(`<dd><details> <summary class="change-type">Additions</summary> ${additions.join(
        ""
      )}
    </details></dd>`);
    if (edits.length > 0)
      entries.push(`<dd><details> <summary class="change-type">Edits</summary> ${edits.join(
        ""
      )}
    </details></dd>`);
    if (deletions.length > 0)
      entries.push(`<dd><details> <summary class="change-type">Deletions</summary> ${deletions.join(
        ""
      )}
    </details></dd>`);

    // Write html output here
    const log = `<dl><details> <summary class="mutation">${counter}
    </summary> <dt>${entries.join("")}
    </dt> </details></dl>`;
    output.innerHTML += log;
    counter += 1;
  }
});