json-diff-kit - npm Package Compare versions

Comparing version 1.0.4 to 1.0.6

dist/index.js

@@ -0,1 +1,268 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __commonJS = (cb, mod) => function __require() {
+  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+};
+var __reExport = (target, module, copyDefault, desc) => {
+  if (module && typeof module === "object" || typeof module === "function") {
+    for (let key of __getOwnPropNames(module))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module[key], enumerable: !(desc = __getOwnPropDesc(module, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module != null ? __create(__getProtoOf(module)) : {}, "default", !isNodeMode && module && module.__esModule ? { get: () => module.default, enumerable: true } : { value: module, enumerable: true })), module);
+};
+
+// node_modules/.pnpm/fast-myers-diff@3.0.1/node_modules/fast-myers-diff/bin/index.js
+var require_bin = __commonJS({
+  "node_modules/.pnpm/fast-myers-diff@3.0.1/node_modules/fast-myers-diff/bin/index.js"(exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.applyPatch = exports.calcPatch = exports.lcs = exports.diff = exports.diff_core = void 0;
+    function diff_internal(state, c) {
+      const { b, eq, stack_base } = state;
+      let { i, N, j, M, Z, stack_top } = state;
+      for (; ; ) {
+        switch (c) {
+          case 0: {
+            Z_block:
+              while (N > 0 && M > 0) {
+                b.fill(0, 0, 2 * Z);
+                const W = N - M;
+                const L = N + M;
+                const parity = L & 1;
+                const offsetx = i + N - 1;
+                const offsety = j + M - 1;
+                const hmax = (L + parity) / 2;
+                let z;
+                h_loop:
+                  for (let h = 0; h <= hmax; h++) {
+                    const kmin = 2 * Math.max(0, h - M) - h;
+                    const kmax = h - 2 * Math.max(0, h - N);
+                    for (let k = kmin; k <= kmax; k += 2) {
+                      const gkm = b[k - 1 - Z * Math.floor((k - 1) / Z)];
+                      const gkp = b[k + 1 - Z * Math.floor((k + 1) / Z)];
+                      const u = k === -h || k !== h && gkm < gkp ? gkp : gkm + 1;
+                      const v = u - k;
+                      let x = u;
+                      let y = v;
+                      while (x < N && y < M && eq(i + x, j + y))
+                        x++, y++;
+                      b[k - Z * Math.floor(k / Z)] = x;
+                      if (parity === 1 && (z = W - k) >= 1 - h && z < h && x + b[Z + z - Z * Math.floor(z / Z)] >= N) {
+                        if (h > 1 || x !== u) {
+                          stack_base[stack_top++] = i + x;
+                          stack_base[stack_top++] = N - x;
+                          stack_base[stack_top++] = j + y;
+                          stack_base[stack_top++] = M - y;
+                          N = u;
+                          M = v;
+                          Z = 2 * (Math.min(N, M) + 1);
+                          continue Z_block;
+                        } else
+                          break h_loop;
+                      }
+                    }
+                    for (let k = kmin; k <= kmax; k += 2) {
+                      const pkm = b[Z + k - 1 - Z * Math.floor((k - 1) / Z)];
+                      const pkp = b[Z + k + 1 - Z * Math.floor((k + 1) / Z)];
+                      const u = k === -h || k !== h && pkm < pkp ? pkp : pkm + 1;
+                      const v = u - k;
+                      let x = u;
+                      let y = v;
+                      while (x < N && y < M && eq(offsetx - x, offsety - y))
+                        x++, y++;
+                      b[Z + k - Z * Math.floor(k / Z)] = x;
+                      if (parity === 0 && (z = W - k) >= -h && z <= h && x + b[z - Z * Math.floor(z / Z)] >= N) {
+                        if (h > 0 || x !== u) {
+                          stack_base[stack_top++] = i + N - u;
+                          stack_base[stack_top++] = u;
+                          stack_base[stack_top++] = j + M - v;
+                          stack_base[stack_top++] = v;
+                          N = N - x;
+                          M = M - y;
+                          Z = 2 * (Math.min(N, M) + 1);
+                          continue Z_block;
+                        } else
+                          break h_loop;
+                      }
+                    }
+                  }
+                if (N === M)
+                  continue;
+                if (M > N) {
+                  i += N;
+                  j += N;
+                  M -= N;
+                  N = 0;
+                } else {
+                  i += M;
+                  j += M;
+                  N -= M;
+                  M = 0;
+                }
+                break;
+              }
+            if (N + M !== 0) {
+              if (state.pxe === i || state.pye === j) {
+                state.pxe = i + N;
+                state.pye = j + M;
+              } else {
+                const sx = state.pxs;
+                state.oxs = state.pxs;
+                state.oxe = state.pxe;
+                state.oys = state.pys;
+                state.oye = state.pye;
+                state.pxs = i;
+                state.pxe = i + N;
+                state.pys = j;
+                state.pye = j + M;
+                if (sx >= 0) {
+                  state.i = i;
+                  state.N = N;
+                  state.j = j;
+                  state.M = M;
+                  state.Z = Z;
+                  state.stack_top = stack_top;
+                  return 1;
+                }
+              }
+            }
+          }
+          case 1: {
+            if (stack_top === 0)
+              return 2;
+            M = stack_base[--stack_top];
+            j = stack_base[--stack_top];
+            N = stack_base[--stack_top];
+            i = stack_base[--stack_top];
+            Z = 2 * (Math.min(N, M) + 1);
+            c = 0;
+          }
+        }
+      }
+    }
+    var DiffGen = class {
+      constructor(state) {
+        this.state = state;
+        this.c = 0;
+        this.result = { value: null, done: false };
+      }
+      [Symbol.iterator]() {
+        return this;
+      }
+      next() {
+        const { state, result } = this;
+        if (this.c > 1) {
+          result.done = true;
+          result.value = void 0;
+          return result;
+        }
+        const c = diff_internal(state, this.c);
+        this.c = c;
+        if (c === 1) {
+          result.value = [state.oxs, state.oxe, state.oys, state.oye];
+          return result;
+        }
+        if (state.pxs >= 0) {
+          result.value = [state.pxs, state.pxe, state.pys, state.pye];
+          return result;
+        }
+        result.done = true;
+        result.value = void 0;
+        return result;
+      }
+    };
+    function diff_core(i, N, j, M, eq) {
+      const Z = (Math.min(N, M) + 1) * 2;
+      const L = N + M;
+      const b = new (L < 256 ? Uint8Array : L < 65536 ? Uint16Array : Uint32Array)(2 * Z);
+      return new DiffGen({ i, N, j, M, Z, b, eq, pxs: -1, pxe: -1, pys: -1, pye: -1, oxs: -1, oxe: -1, oys: -1, oye: -1, stack_top: 0, stack_base: [] });
+    }
+    exports.diff_core = diff_core;
+    function diff(xs, ys) {
+      let [i, N, M] = [0, xs.length, ys.length];
+      while (i < N && i < M && xs[i] === ys[i])
+        i++;
+      if (i === N && i === M)
+        return [][Symbol.iterator]();
+      while (xs[--N] === ys[--M] && N > i && M > i)
+        ;
+      const eq = (x, y) => xs[x] === ys[y];
+      return diff_core(i, N + 1 - i, i, M + 1 - i, eq);
+    }
+    exports.diff = diff;
+    var LCSGen = class {
+      constructor(diff2, N) {
+        this.diff = diff2;
+        this.N = N;
+        this.i = 0;
+        this.j = 0;
+      }
+      [Symbol.iterator]() {
+        return this;
+      }
+      next() {
+        const rec = this.diff.next();
+        if (rec.done) {
+          const { i: i2, j: j2, N } = this;
+          if (i2 < N) {
+            rec.done = false;
+            rec.value = [i2, j2, N - i2];
+            this.i = N;
+          }
+          return rec;
+        }
+        const v = rec.value;
+        const sx = v[0];
+        const ex = v[1];
+        const ey = v[3];
+        const { i, j } = this;
+        if (i !== sx) {
+          v.length--;
+          v[0] = i;
+          v[1] = j;
+          v[2] = sx - i;
+        }
+        this.i = ex;
+        this.j = ey;
+        return rec;
+      }
+    };
+    function lcs2(xs, ys) {
+      return new LCSGen(diff(xs, ys), xs.length);
+    }
+    exports.lcs = lcs2;
+    function* calcPatch(xs, ys) {
+      const slice = ArrayBuffer.isView(xs) ? Uint8Array.prototype.subarray : xs.slice;
+      for (const v of diff(xs, ys)) {
+        v[2] = slice.call(ys, v[2], v[3]);
+        yield v;
+      }
+    }
+    exports.calcPatch = calcPatch;
+    function* applyPatch(xs, patch) {
+      let i = 0;
+      const slice = ArrayBuffer.isView(xs) ? Uint8Array.prototype.subarray : xs.slice;
+      for (const [dels, dele, ins] of patch) {
+        if (i < dels)
+          yield slice.call(xs, i, dels);
+        if (ins.length > 0)
+          yield ins;
+        i = dele;
+      }
+      if (i < xs.length)
+        yield slice.call(xs, i);
+    }
+    exports.applyPatch = applyPatch;
+  }
+});
+
 // src/utils/detect-circular.ts
@@ -584,58 +851,84 @@ var detectCircular = (value, map = /* @__PURE__ */ new Map()) => {
 // src/utils/get-inline-diff.ts
-var lcsString = (l, r) => {
-  const f = Array(l.length + 1).fill(0).map(() => Array(r.length + 1).fill(0));
-  const backtrack = Array(l.length + 1).fill(0).map(() => Array(r.length + 1).fill(0));
-  for (let i2 = 1; i2 <= l.length; i2++)
-    backtrack[i2][0] = "up";
-  for (let j2 = 1; j2 <= r.length; j2++)
-    backtrack[0][j2] = "left";
-  for (let i2 = 1; i2 <= l.length; i2++) {
-    for (let j2 = 1; j2 <= r.length; j2++) {
-      if (l[i2 - 1] === r[j2 - 1]) {
-        f[i2][j2] = f[i2 - 1][j2 - 1] + 1;
-        backtrack[i2][j2] = "diag";
-      } else if (f[i2 - 1][j2] >= f[i2][j2 - 1]) {
-        f[i2][j2] = f[i2 - 1][j2];
-        backtrack[i2][j2] = "up";
+var import_fast_myers_diff = __toESM(require_bin());
+var filterEmptyParts = (arr) => {
+  return arr.filter((item) => item.text.length);
+};
+var joinBySeparator = (arr, separator) => {
+  if (!arr.length) {
+    return arr;
+  }
+  const result = [];
+  for (let i = 0; i < arr.length; i++) {
+    if (result.length && arr[i].text.length) {
+      if (result[result.length - 1].type === "equal") {
+        result[result.length - 1] = {
+          ...result[result.length - 1],
+          text: result[result.length - 1].text + separator
+        };
       } else {
-        f[i2][j2] = f[i2][j2 - 1];
-        backtrack[i2][j2] = "left";
+        result.push({ type: "equal", text: separator });
       }
     }
+    result.push(arr[i]);
   }
-  let i = l.length;
-  let j = r.length;
-  const tLeft = [];
-  const tRight = [];
-  while (i > 0 || j > 0) {
-    if (backtrack[i][j] === "diag") {
-      if (!tLeft.length || tLeft[0].type !== "equal") {
-        tLeft.unshift({ type: "equal", text: "" });
+  return result;
+};
+var getInlineDiff = (l, r, options) => {
+  if (options.mode === "word") {
+    const lArr = l.split(options.wordSeparator);
+    const rArr = r.split(options.wordSeparator);
+    const iter2 = (0, import_fast_myers_diff.lcs)(lArr, rArr);
+    let resultL2 = [];
+    let resultR2 = [];
+    let lastL2 = 0;
+    let lastR2 = 0;
+    for (const [sl, sr, length] of iter2) {
+      if (sl > lastL2) {
+        resultL2.push({ type: "remove", text: lArr.slice(lastL2, sl).join(options.wordSeparator) });
       }
-      if (!tRight.length || tRight[0].type !== "equal") {
-        tRight.unshift({ type: "equal", text: "" });
+      if (sr > lastR2) {
+        resultR2.push({ type: "add", text: rArr.slice(lastR2, sr).join(options.wordSeparator) });
       }
-      tLeft[0].text = l[i - 1] + tLeft[0].text;
-      tRight[0].text = r[j - 1] + tRight[0].text;
-      i--;
-      j--;
-    } else if (backtrack[i][j] === "up") {
-      if (!tLeft.length || tLeft[0].type !== "remove") {
-        tLeft.unshift({ type: "remove", text: "" });
-      }
-      tLeft[0].text = l[i - 1] + tLeft[0].text;
-      i--;
-    } else {
-      if (!tRight.length || tRight[0].type !== "add") {
-        tRight.unshift({ type: "add", text: "" });
-      }
-      tRight[0].text = r[j - 1] + tRight[0].text;
-      j--;
+      lastL2 = sl + length;
+      lastR2 = sr + length;
+      resultL2.push({ type: "equal", text: lArr.slice(sl, lastL2).join(options.wordSeparator) });
+      resultR2.push({ type: "equal", text: rArr.slice(sr, lastR2).join(options.wordSeparator) });
     }
+    if (l.length > lastL2) {
+      resultL2.push({ type: "remove", text: lArr.slice(lastL2).join(options.wordSeparator) });
+    }
+    if (r.length > lastR2) {
+      resultR2.push({ type: "add", text: rArr.slice(lastR2).join(options.wordSeparator) });
+    }
+    resultL2 = joinBySeparator(filterEmptyParts(resultL2), options.wordSeparator);
+    resultR2 = joinBySeparator(filterEmptyParts(resultR2), options.wordSeparator);
+    return [resultL2, resultR2];
   }
-  return [tLeft, tRight];
+  const iter = (0, import_fast_myers_diff.lcs)(l, r);
+  let resultL = [];
+  let resultR = [];
+  let lastL = 0;
+  let lastR = 0;
+  for (const [sl, sr, length] of iter) {
+    if (sl > lastL) {
+      resultL.push({ type: "remove", text: l.substring(lastL, sl) });
+    }
+    if (sr > lastR) {
+      resultR.push({ type: "add", text: r.substring(lastR, sr) });
+    }
+    lastL = sl + length;
+    lastR = sr + length;
+    resultL.push({ type: "equal", text: l.substring(sl, lastL) });
+    resultR.push({ type: "equal", text: r.substring(sr, lastR) });
+  }
+  if (l.length > lastL) {
+    resultL.push({ type: "remove", text: l.substring(lastL) });
+  }
+  if (r.length > lastR) {
+    resultR.push({ type: "add", text: r.substring(lastR) });
+  }
+  resultL = filterEmptyParts(resultL);
+  resultR = filterEmptyParts(resultR);
+  return [resultL, resultR];
 };
-var getInlineDiff = (l, r) => {
-  return lcsString(l, r);
-};
 var get_inline_diff_default = getInlineDiff;
@@ -646,6 +939,10 @@
   const [linesLeft, linesRight] = props.diff;
-  const lineNumberWidth = `${String(linesLeft.length).length / 2}em`;
+  const lineNumberWidth = props.lineNumbers ? `${String(linesLeft.length).length / 2}em` : 0;
   const indent = props.indent ?? 2;
   const indentChar = indent === "tab" ? "	" : " ";
   const indentSize = indent === "tab" ? 1 : indent;
+  const inlineDiffOptions = {
+    mode: props.inlineDiffOptions?.mode || "char",
+    wordSeparator: props.inlineDiffOptions?.wordSeparator || ""
+  };
   const renderInlineDiffResult = (arr) => {
@@ -667,3 +964,5 @@ return arr.map((result) => /* @__PURE__ */ React.createElement(React.Fragment, null, result.map((item, index) => {
     const r = linesRight[index];
-    const [lText, rText] = props.highlightInlineDiff && l.type === "modify" && r.type === "modify" ? renderInlineDiffResult(get_inline_diff_default(l.text, r.text)) : [l.text, r.text];
+    const [lText, rText] = props.highlightInlineDiff && l.type === "modify" && r.type === "modify" ? renderInlineDiffResult(get_inline_diff_default(l.text, r.text, inlineDiffOptions)) : [l.text, r.text];
+    const bgColourL = l.type !== "equal" ? props.bgColour?.[l.type] ?? "" : "";
+    const bgColourR = r.type !== "equal" ? props.bgColour?.[r.type] ?? "" : "";
     return /* @__PURE__ */ React.createElement("tr", {
@@ -673,10 +972,12 @@ key: index
       className: `line-${l.type} line-number`,
-      style: { width: lineNumberWidth }
+      style: { width: lineNumberWidth, backgroundColor: bgColourL }
     }, l.lineNumber), /* @__PURE__ */ React.createElement("td", {
-      className: `line-${l.type}`
+      className: `line-${l.type}`,
+      style: { backgroundColor: bgColourL }
     }, /* @__PURE__ */ React.createElement("pre", null, l.text && indentChar.repeat(l.level * indentSize), lText, l.comma && ",")), props.lineNumbers && /* @__PURE__ */ React.createElement("td", {
       className: `line-${r.type} line-number`,
-      style: { width: lineNumberWidth }
+      style: { width: lineNumberWidth, backgroundColor: bgColourR }
     }, r.lineNumber), /* @__PURE__ */ React.createElement("td", {
-      className: `line-${r.type}`
+      className: `line-${r.type}`,
+      style: { backgroundColor: bgColourR }
     }, /* @__PURE__ */ React.createElement("pre", null, r.text && indentChar.repeat(r.level * indentSize), rText, r.comma && ",")));
@@ -683,0 +984,0 @@ };

package.json

 {
   "name": "json-diff-kit",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "description": "A better JSON differ & viewer.",
@@ -53,3 +53,6 @@ "module": "dist/index.js",
     "react-dom": "^17.0.0 || ^16.0.0"
+  },
+  "dependencies": {
+    "fast-myers-diff": "^3.0.1"
   }
 }

README.md

@@ -7,3 +7,3 @@ # JSON Diff Kit
 
-A better JSON differ & viewer.
+A better JSON differ & viewer library written in TypeScript. [DEMO here!](https://json-diff-kit.js.org/)
 
@@ -34,2 +34,3 @@ > Notice: considering most of the browsers now support ES6, this library has only the ES6 version. If you need the compatibility with older browsers, please configure the compiler in your project (e.g. add this library to the `include` field in `babel.config.js`).
 
+// the two JS objects
 const before = {
@@ -40,2 +41,6 @@ a: 1,
   e: ['1', 2, { f: 3, g: null, h: [5], i: [] }, 9],
+  m: [],
+  q: 'JSON diff can\'t be possible',
+  r: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+  s: 1024,
 };
@@ -47,2 +52,10 @@ const after = {
   e: ['1', 2, 3, { f: 4, g: false, i: [7, 8] }, 10],
+  j: { k: 11, l: 12 },
+  m: [
+    { n: 1, o: 2 },
+    { p: 3 },
+  ],
+  q: 'JSON diff is possible!',
+  r: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed quasi architecto beatae incididunt ut labore et dolore magna aliqua.',
+  s: '1024',
 };
@@ -55,5 +68,7 @@
   showModifications: true, // default `true`
-  arrayDiffMethod: 'lcs',  // default `"normal"`
+  arrayDiffMethod: 'lcs',  // default `"normal"`, but `"lcs"` may be more useful
 });
 
+// you may want to use `useMemo` (for React) or `computed` (for Vue)
+// to avoid redundant computations
 const diff = differ.diff(before, after);
@@ -78,5 +93,10 @@ console.log(diff);
     <Viewer
-      diff={props.diff}  // required
-      indent={4}         // default `2`
-      lineNumbers={true} // default `false`
+      diff={props.diff}          // required
+      indent={4}                 // default `2`
+      lineNumbers={true}         // default `false`
+      highlightInlineDiff={true} // default `false`
+      inlineDiffOptions={{
+        mode: 'word',            // default `"char"`, but `"word"` may be more useful
+        wordSeparator: ' ',      // default `""`, but `" "` is more useful for sentences
+      }}
     />
@@ -93,3 +113,3 @@ );
 
-Please check the [demo pages](https://json-diff-kit.js.org/).
+Please check the [demo page](https://json-diff-kit.js.org/), where you can adjust nearly all parameters and see the result.
 
@@ -100,2 +120,11 @@ ## Algorithm Details
 
+## Features & Roadmap
+
+- [x] Provide a `Differ` class and a `Viewer` component
+- [x] Merge "remove & add" at the same place as a modification
+- [x] Support inline diffing by word instead of by character
+- [ ] Generate code directly in the demo page
+- [ ] Add CLI tool
+- [ ] Improve unit tests
+
 ## License
@@ -102,0 +131,0 @@

typings/index.d.ts

 import Differ from './differ';
 import Viewer from './viewer';
+export type { InlineDiffOptions, InlineDiffResult, } from './utils/get-inline-diff';
 export type { ArrayDiffFunc, DifferOptions, DiffResult, } from './differ';
+export type { ViewerProps, } from '../src/viewer';
 export { Differ, Viewer };

typings/utils/get-inline-diff.d.ts

@@ -0,1 +1,5 @@
+export interface InlineDiffOptions {
+    mode?: 'char' | 'word';
+    wordSeparator?: string;
+}
 export interface InlineDiffResult {
@@ -5,3 +9,3 @@ type: 'add' | 'remove' | 'equal';
 }
-declare const getInlineDiff: (l: string, r: string) => [InlineDiffResult[], InlineDiffResult[]];
+declare const getInlineDiff: (l: string, r: string, options: InlineDiffOptions) => InlineDiffResult[][];
 export default getInlineDiff;

typings/viewer.d.ts

 import * as React from 'react';
 import type { DiffResult } from './differ';
-interface ViewerProps {
+import type { InlineDiffOptions } from './utils/get-inline-diff';
+export interface ViewerProps {
     /** The diff result `[before, after]`. */
@@ -14,6 +15,8 @@ diff: readonly [DiffResult[], DiffResult[]];
     };
-    /** Display line numbers, default is `true`. */
+    /** Display line numbers, default is `false`. */
     lineNumbers?: boolean;
-    /** Whether to show the inline diff highlight, default is `true`. */
+    /** Whether to show the inline diff highlight, default is `false`. */
     highlightInlineDiff?: boolean;
+    /** Controls the inline diff behaviour, the `highlightInlineDiff` must be enabled. */
+    inlineDiffOptions?: InlineDiffOptions;
     /** Extra class names */
@@ -20,0 +23,0 @@ className?: string;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

140797

increased by10.33%

Lines of code

1826

increased by20.53%

Number of lines in readme file

130

increased by28.71%

Worsened metrics

Dependency count

3

increased by50%

Dependency changes

• + Addedfast-myers-diff@^3.0.1

• + Addedfast-myers-diff@3.2.0(transitive)