5sss / vue-json-compare

vue(2.x) json compare components,live demo:https://codesandbox.io/s/suspicious-elion-bwl6v?file=/src/App.vue

vue-json-compare

A vue(2.x) components for compare Object or Array

Links

• Github

Install

npm install --save vue-json-compare

Usage

<template>
  <div>
    <vue-json-compare :oldData="oldData" :newData="newData"></vue-json-compare>
  </div>
</template>

import vueJsonCompare from 'vue-json-compare';
const oldData = {
  name: 'super',
  age: 18,
  task: [
    { name: 'eat', time: '09:00' },
    { name: 'work', time: '10:00', deleted: 'this prop has been deleted!' },
    { name: 'sleep', time: '22:00' },
  ],
};
const newData = {
  name: 'coolapt',
  age: 20,
  task: [
    { name: 'eat', time: '09:00' },
    { name: 'work', time: '10:00' },
    { name: 'sleep', time: '23:00' },
    { name: 'running', time: '08:00' },
  ],
};
export default {
  components: {
    vueJsonCompare,
  },
  data() {
    return {
      oldData: oldData,
      newData: newData,
    };
  },
};

Result

Props

Attribute	Level	Description	Type	Default
oldData	basic	json data	object or object Array, {...}, [{...}, {...}]	-
newData	basic	json data	object or object Array, {...}, [{...}, {...}]	-

Events

not yet...

PS

如果喜欢请给个星星，谢谢。 If you like, please give me a star, thank you.

如果需要帮助: QQ:1573815240 邮箱: [email protected] if you need help: QQ:1573815240 email: [email protected]

vue-json-compare's Issues

Compatibility with @vue/cli-plugin-unit-jest

When I'm testing my component with https://cli.vuejs.org/core-plugins/unit-jest.html and my component contains import vueJsonCompare from 'vue-json-compare', then the Jest test runner fails with:

  ● Test suite failed to run

    Jest encountered an unexpected token

    This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

    Here's what you can do:
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/en/configuration.html

    Details:

    /home/slaweet/git/review-telltale-vue/node_modules/vue-json-compare/src/index.vue:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){<template>
                                                                                             ^

    SyntaxError: Unexpected token '<'

      at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:537:17)
      at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:579:25)
      at Object.<anonymous> (node_modules/vue-json-compare/index.js:2:18)

I can resolve the error by mocking vue-json-compare with

jest.mock('vue-json-compare', () => (                                                             
  (fn: (...args: any[]) => void) => fn                                                               
));

But with all other 3-rd party modules, I don't have to do this.

Diff is (arguably) incorrectly highlighted in certain cases

I've been using this package for a couple of months now and recently I found a case where the diff is (arguably) incorrectly highlighted. I've had to redact some information for security reasons but I can assure you that the longer redacted bars correspond with each other

Please let me know if there is anything else I can do to help out

Error: Can't resolve './tree' in '...../node_modules/vue-json-compare/src'

In vuejsoncompare.vue, change:
import tree from './tree'

To:
import tree from './tree.vue'

Correct line numbers while displaying object changes

I have an object with 15 lines. But when I display changes in it, line numbers count both old and new line value, so line numerations for the rest of the object are messed.
I've attached screenshots for current implementation and desired result from github

Thanks for your attention!

Show old and new data

If possible to show both contents and diff?

Thanks

Complex types are shown as undefined

Hi,

when I want to compare two objects containing arrays (e.g. consumerApplications or modification) or objects (e.g. owner) they are shown as undefined. However, empty arrays (e.g. routingRules) or strings (e.g. state, type) are shown as expected.

@5SSS Can you provide a fix?

可以类似git那种 左右布局对比吗