diff --git a/README.md b/README.md index 4150241..4478431 100644 --- a/README.md +++ b/README.md @@ -10,9 +10,16 @@ Example console.diff(left, right); console.diffLeft(left); console.diffRight(right); +console.diffPush(next); ``` ![screenshot](./doc/screenshot.png) +Usage basics +=== +Left side for old state, right side for new. +To track changes of the same object in timed manner you can push it with `diffPush` command, +that will shift objects from right to left, showing differences with previous push state. + Based on === [jsondiffpatch](https://github.com/benjamine/jsondiffpatch) by benjamine diff --git a/src/js/app/panel.vue.js b/src/js/app/panel.vue.js index b7a19c2..5b24908 100644 --- a/src/js/app/panel.vue.js +++ b/src/js/app/panel.vue.js @@ -130,7 +130,7 @@ define(['api'], function (api) { console.log('$_onRuntimeMessage', req); if (req.source === 'jsdiff-devtools-extension-api') { - this.$_onDiffRequest(req.payload.left, req.payload.right); + this.$_onDiffRequest(req.payload); } }, @@ -147,12 +147,18 @@ define(['api'], function (api) { return false; }, - $_onDiffRequest(left, right) { - if (left) { - this.compare.left = left; + $_onDiffRequest({left, right, push}) { + if (push) { + this.compare.left = this.compare.right; + this.compare.right = push; } - if (right) { - this.compare.right = right; + else { + if (left) { + this.compare.left = left; + } + if (right) { + this.compare.right = right; + } } this.$_restartLastUpdated(); diff --git a/src/js/jsdiff-devtools.js b/src/js/jsdiff-devtools.js index 2018d00..e63a000 100644 --- a/src/js/jsdiff-devtools.js +++ b/src/js/jsdiff-devtools.js @@ -46,8 +46,6 @@ function injectScripts () { } function jsdiff_devtools_extension_api () { - 'use strict'; - if (console.diff) {return;/*nothing to do*/} const source = 'jsdiff-devtools-extension-api'; const w = window; @@ -55,7 +53,8 @@ function jsdiff_devtools_extension_api () { Object.assign(console, { diff(left, right) {w.postMessage({payload: {left, right}, source}, '*');}, diffLeft(left) {w.postMessage({payload: {left}, source}, '*');}, - diffRight(right) {w.postMessage({payload: {right}, source}, '*');} + diffRight(right) {w.postMessage({payload: {right}, source}, '*');}, + diffPush(push) {w.postMessage({payload: {push}, source}, '*');} }); console.log( @@ -67,7 +66,7 @@ function jsdiff_devtools_extension_api () { border: 1px solid #bbb; border-radius: 4px; `, - `console.diff(left, right); console.diffLeft(left); console.diffRight(right);` + `console.diff(left, right); console.diffLeft(left); console.diffRight(right); console.diffPush(next);` ); }