rexskz / json-diff-kit Goto Github PK

Hi!
Could you fix this bug, please?

When we compare k here, we compare 1 to 1 from the beginning of the array.
And when we compare d here, we compare 1 to 1 from the end of the array, that looks like a bug and {a: 1}, {b: 2} should be shown as equal for before and after.

const before = {
  d: [{a: 1}, {b: 2}, {c: 4}, {d: 4}],
  k: [1, 2, 5],
};
const after = {
  d: [{a: 1}, {b: 2}],
  k: [1, 2],
};

    ![image](https://user-images.githubusercontent.com/39376011/207543873-719475e2-4b02-4bd0-b55a-4fc5a8247a08.png)

Originally posted by @yhtyanght in #7 (comment)

Thanks for the library. I am very happy with it. There was one small error that was quite hard to find.
Sometimes I had undefined as a value in my object. This caused the library to crash with the message:

Cannot read properties of undefined (reading 'split')

Could you treat undefined as null?

I have created a reproduceable demo https://codepen.io/hanselsen/pen/oNVERGv

Hello.

I found out the following issue while running some test cases.

As you can see I've the same object on the right side and added one object above and one below of it. The library detects that the text of the left object was changed.

The following happens on the demo if you have an intrinsic value that is compared with an object.

Notice that the comparison of a: null to a: { object with values }, puts the resulting a all on one line instead of beautifying the JSON. However, when c is undefined to now an object, it beautifies the JSON properly. This also happens when the object on the right is contained in an array where it was not there before:

Expected Behavior:

• Output JSON differences are beautified and line broken similar to the comparison of undefined and object.

Hi Is it possible to customise the highlighter color?

For example, If there is difference in values between 2 JSONs, then I would like to have "purple" highlighter instead of orange?

Regards,
mesbahul

To let it use the case-insensitive comparison when sorting keys.

This inspiration comes from the comment, thanks for the suggestion.

Hey all. Is there any timeline on when this library will be available for Vue 3? I see it being referenced in the README in several places, but the Viewer seems to be only available for React.

https://json-diff-kit.js.org/#l=%7B%0A++%22a%22%3A+90071992547409912345%0A%7D&r=%7B%0A++%22b%22%3A+90071992547409912345%0A%7D

any idea why this occurs? the code used is

const ChangesComponent = (data) => {
    
    const [diff, setDiff] = useState(null)

    setDiff(differ.diff(data?.old, data?.new))

    const differ = new Differ({
        detectCircular: true,
        maxDepth: Infinity,
        showModifications: true,
        arrayDiffMethod: 'lcs',
    })

    return(
        <Viewer 
            diff={diff}
            indent={2}
            lineNumbers={true}
            highlightInlineDiff={false}
            inlineDiffOptions={{
                mode: 'word',
                wordSeparator: ' ',
            }}
        />
    )
}

This only happens on the second render. Not on first. Also noticed that theres no error if the newValue is just ``. when both old value and new value is added, it crashes.

I pulled in v1.0.8 of this diff tool and then did a build and the build failed with a number of errors (below). I'm looking for
how I can get this code to work in my environment which uses Angular 7, typescript 3.2.2 and node v10.17.0. I looked around for what minimum version of typescript and/or node would work but could not find that information.

npm run build:prod

ERROR in node_modules/json-diff-kit/typings/differ.d.ts(93,68): error TS1005: ']' expected.
node_modules/json-diff-kit/typings/differ.d.ts(93,80): error TS1005: ';' expected.
node_modules/json-diff-kit/typings/differ.d.ts(93,82): error TS1005: ';' expected.
node_modules/json-diff-kit/typings/index.d.ts(3,1): error TS1128: Declaration or statement expected.
node_modules/json-diff-kit/typings/index.d.ts(3,13): error TS1005: ';' expected.
node_modules/json-diff-kit/typings/index.d.ts(3,52): error TS1109: Expression expected.
node_modules/json-diff-kit/typings/index.d.ts(3,59): error TS1005: ';' expected.
node_modules/json-diff-kit/typings/index.d.ts(4,1): error TS1128: Declaration or statement expected.
node_modules/json-diff-kit/typings/index.d.ts(4,13): error TS1005: ';' expected.
node_modules/json-diff-kit/typings/index.d.ts(4,57): error TS1109: Expression expected.
node_modules/json-diff-kit/typings/index.d.ts(4,64): error TS1005: ';' expected.
node_modules/json-diff-kit/typings/index.d.ts(5,1): error TS1128: Declaration or statement expected.
node_modules/json-diff-kit/typings/index.d.ts(5,13): error TS1005: ';' expected.
node_modules/json-diff-kit/typings/index.d.ts(5,28): error TS1109: Expression expected.
node_modules/json-diff-kit/typings/index.d.ts(5,35): error TS1005: ';' expected.
node_modules/json-diff-kit/typings/viewer.d.ts(2,13): error TS1005: '=' expected.
node_modules/json-diff-kit/typings/viewer.d.ts(2,33): error TS1005: ';' expected.
node_modules/json-diff-kit/typings/viewer.d.ts(3,13): error TS1005: '=' expected.
node_modules/json-diff-kit/typings/viewer.d.ts(3,40): error TS1005: ';' expected.
node_modules/json-diff-kit/typings/viewer.d.ts(56,33): error TS1005: ']' expected.
node_modules/json-diff-kit/typings/viewer.d.ts(56,35): error TS1131: Property or signature expected.
node_modules/json-diff-kit/typings/viewer.d.ts(56,46): error TS1011: An element access expression should take an argument.
node_modules/json-diff-kit/typings/viewer.d.ts(56,47): error TS1005: ';' expected.
node_modules/json-diff-kit/typings/viewer.d.ts(58,12): error TS1109: Expression expected.
node_modules/json-diff-kit/typings/viewer.d.ts(60,14): error TS1109: Expression expected.
node_modules/json-diff-kit/typings/viewer.d.ts(61,21): error TS1005: ',' expected.
node_modules/json-diff-kit/typings/viewer.d.ts(62,24): error TS1005: ',' expected.
node_modules/json-diff-kit/typings/viewer.d.ts(63,24): error TS1005: ',' expected.
node_modules/json-diff-kit/typings/viewer.d.ts(66,17): error TS1109: Expression expected.
node_modules/json-diff-kit/typings/viewer.d.ts(68,25): error TS1109: Expression expected.
node_modules/json-diff-kit/typings/viewer.d.ts(70,23): error TS1109: Expression expected.
node_modules/json-diff-kit/typings/viewer.d.ts(75,24): error TS1109: Expression expected.
node_modules/json-diff-kit/typings/viewer.d.ts(77,15): error TS1109: Expression expected.
node_modules/json-diff-kit/typings/viewer.d.ts(79,11): error TS1109: Expression expected.
node_modules/json-diff-kit/typings/viewer.d.ts(80,1): error TS1128: Declaration or statement expected.

install the package with pnpm add json-diff-kit
and run the demo

demo code: nodejs 19.2 // mytest.mjs

import { Differ,Viewer } from 'json-diff-kit';
console.log(Differ,Viewer)

Hi, thank you so much for creating the tool to compare json array. But when I built it, I faced an error like this:

Is there any way that I can fix this issue? Thanks!

I need help.

I believe this behavior was supposed to be fixed in #13, so I would appreciate if you could tell me if I need to change some options or if this is actually a bug.

When I clicked to the show lines before it is unfortunately not showing the previous lines. Could you please look at this bug?
Thanks in advance.

Should have way to output html string only and not need any javascript like react or vue then it can be added to any html page.

What happened?

The diff result does not respect original json object's key order.

Reproduce

Just see this example, the key order is ["z", "a"] in original object, but turns into ["a", "z"] after perform diff operation.

When diffing

{
    "a": null
}

and

{
    "a": null
}

we get

{ 
    "a": {
    }
}

the react app crashes when i try to compare json file of size: 3.3mb

I'm trying to use JSONDiffKit to visualize diff between two, relatively big JSON payloads.
Usually the diff is only about 5 properties out of the whole structure.

The current problem I face is out of 480 lines the viewer show only 7 actually have change but I still see the whole structure.

Of course the solution is not as simple as just hiding any line that haven't been changed because you can have an inner object have a single property change but you still want to see the parent properties to understand the context of the change.

Do you think it is possible to add the ability to somehow decide which lines to hide to make the diff more concise and easy to understand?

Hi,
there are already a few issues due to build problems however the error I'm getting is not among them.

After adding an import of the package to my next.js project (using TypeScript) I get the following error:

error - ...\node_modules\json-diff-kit\dist\index.js:2453
import * as React from "react";
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at Object.compileFunction (node:vm:360:18)
    at wrapSafe (node:internal/modules/cjs/loader:1088:15)
    at Module._compile (node:internal/modules/cjs/loader:1123:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1213:10)
    at Module.load (node:internal/modules/cjs/loader:1037:32)
    at Module._load (node:internal/modules/cjs/loader:878:12)
    at Module.require (node:internal/modules/cjs/loader:1061:19)
    at require (node:internal/modules/cjs/helpers:103:18)
    at json-diff-kit (...\.next\server\pages\audit.js:339:18)
    at __webpack_require__ (...\.next\server\webpack-runtime.js:33:42) {
  page: '/audit'
}

The mentioned (compiled) file does indeed contain the import:

This is the only import in this compiled file so I guess it is a build error and the other imports got adjusted properly.

Maybe this import could be adjusted to just import the used function/types/etc and not everything and that might resolve the issue:

Also just in case this import exists because it was necessary to import React in older versions of React, this is no longer the case.

It's really an awesome kit, just wondering if would be a way to split into different packages since for some situations they arent going to use terminal-kit, but it will be a dependency anyway.

Hi,

I'm getting a babel error "Support for the experimental syntax 'classProperties' isn't currently enabled". I added @babel/plugin-proposal-class-properties and configured my babel file(.babelrc) still not working. Can you help me to solve this issue.

Thanks.

How can i do sytax highligting? For example with prism. Is it possible with default viewer?