diff options
author | 2023-04-22 00:49:03 +0200 | |
---|---|---|
committer | 2023-04-23 15:24:20 +0200 | |
commit | 362f2fa280fdab210074e9a7e01dde6187924d29 (patch) | |
tree | 2a17c13e1db19e0b244cda22eabf8e107218f6b9 /src/tools/json-diff | |
parent | 61ece2387f7061d67177ee41c35db572ffeb84a7 (diff) | |
download | it-tools-362f2fa280fdab210074e9a7e01dde6187924d29.tar.gz it-tools-362f2fa280fdab210074e9a7e01dde6187924d29.tar.zst it-tools-362f2fa280fdab210074e9a7e01dde6187924d29.zip |
feat(new-tool): diff of two json objects
Diffstat (limited to 'src/tools/json-diff')
-rw-r--r-- | src/tools/json-diff/diff-viewer/diff-viewer.models.tsx | 119 | ||||
-rw-r--r-- | src/tools/json-diff/diff-viewer/diff-viewer.vue | 110 | ||||
-rw-r--r-- | src/tools/json-diff/index.ts | 12 | ||||
-rw-r--r-- | src/tools/json-diff/json-diff.e2e.spec.ts | 39 | ||||
-rw-r--r-- | src/tools/json-diff/json-diff.models.test.ts | 80 | ||||
-rw-r--r-- | src/tools/json-diff/json-diff.models.ts | 140 | ||||
-rw-r--r-- | src/tools/json-diff/json-diff.types.ts | 29 | ||||
-rw-r--r-- | src/tools/json-diff/json-diff.vue | 59 |
8 files changed, 588 insertions, 0 deletions
diff --git a/src/tools/json-diff/diff-viewer/diff-viewer.models.tsx b/src/tools/json-diff/diff-viewer/diff-viewer.models.tsx new file mode 100644 index 0000000..5a19feb --- /dev/null +++ b/src/tools/json-diff/diff-viewer/diff-viewer.models.tsx @@ -0,0 +1,119 @@ +import _ from 'lodash'; +import { useCopy } from '@/composable/copy'; +import type { Difference, ArrayDifference, ObjectDifference } from '../json-diff.types'; + +export const DiffRootViewer = ({ diff }: { diff: Difference }) => { + return ( + <div class={'diffs-viewer'}> + <ul>{DiffViewer({ diff, showKeys: false })}</ul> + </div> + ); +}; + +const DiffViewer = ({ diff, showKeys = true }: { diff: Difference; showKeys?: boolean }) => { + const { type, status } = diff; + + if (status === 'updated') { + return ComparisonViewer({ diff, showKeys }); + } + + if (type === 'array') { + return ChildrenViewer({ diff, showKeys, showChildrenKeys: false, openTag: '[', closeTag: ']' }); + } + + if (type === 'object') { + return ChildrenViewer({ diff, showKeys, openTag: '{', closeTag: '}' }); + } + + return LineDiffViewer({ diff, showKeys }); +}; + +const LineDiffViewer = ({ diff, showKeys }: { diff: Difference; showKeys?: boolean }) => { + const { value, key, status, oldValue } = diff; + const valueToDisplay = status === 'removed' ? oldValue : value; + + return ( + <li> + <span class={[status, 'result']}> + {showKeys && ( + <> + <span class={'key'}>{key}</span> + {': '} + </> + )} + {Value({ value: valueToDisplay, status })} + </span> + , + </li> + ); +}; + +const ComparisonViewer = ({ diff, showKeys }: { diff: Difference; showKeys?: boolean }) => { + const { value, key, oldValue } = diff; + + return ( + <li class={'updated-line'}> + {showKeys && ( + <> + <span class={'key'}>{key}</span> + {': '} + </> + )} + {Value({ value: oldValue, status: 'removed' })} + {Value({ value, status: 'added' })}, + </li> + ); +}; + +const ChildrenViewer = ({ + diff, + openTag, + closeTag, + showKeys, + showChildrenKeys = true, +}: { + diff: ArrayDifference | ObjectDifference; + showKeys: boolean; + showChildrenKeys?: boolean; + openTag: string; + closeTag: string; +}) => { + const { children, key, status, type } = diff; + + return ( + <li> + <div class={[type, status]} style={{ display: 'inline-block' }}> + {showKeys && ( + <> + <span class={'key'}>{key}</span> + {': '} + </> + )} + + {openTag} + {children.length > 0 && <ul>{children.map((diff) => DiffViewer({ diff, showKeys: showChildrenKeys }))}</ul>} + {closeTag + ','} + </div> + </li> + ); +}; + +function formatValue(value: unknown) { + if (_.isNull(value)) { + return 'null'; + } + + return JSON.stringify(value); +} + +const Value = ({ value, status }: { value: unknown; status: string }) => { + const formatedValue = formatValue(value); + + const { copy } = useCopy({ source: formatedValue }); + + return ( + <span class={['value', status]} onClick={copy}> + {formatedValue} + </span> + ); +}; diff --git a/src/tools/json-diff/diff-viewer/diff-viewer.vue b/src/tools/json-diff/diff-viewer/diff-viewer.vue new file mode 100644 index 0000000..c77d407 --- /dev/null +++ b/src/tools/json-diff/diff-viewer/diff-viewer.vue @@ -0,0 +1,110 @@ +<template> + <div v-if="showResults"> + <n-space justify="center"> + <n-form-item label="Only show differences" label-placement="left"> + <n-switch v-model:value="onlyShowDifferences" /> + </n-form-item> + </n-space> + + <c-card data-test-id="diff-result"> + <n-text v-if="jsonAreTheSame" depth="3" block text-center italic> The provided JSONs are the same </n-text> + <diff-root-viewer v-else :diff="result" /> + </c-card> + </div> +</template> + +<script lang="ts" setup> +import { useAppTheme } from '@/ui/theme/themes'; +import _ from 'lodash'; +import { DiffRootViewer } from './diff-viewer.models'; +import { diff } from '../json-diff.models'; + +const onlyShowDifferences = ref(false); +const props = defineProps<{ leftJson: unknown; rightJson: unknown }>(); +const { leftJson, rightJson } = toRefs(props); +const appTheme = useAppTheme(); + +const result = computed(() => + diff(leftJson.value, rightJson.value, { onlyShowDifferences: onlyShowDifferences.value }), +); + +const jsonAreTheSame = computed(() => _.isEqual(leftJson.value, rightJson.value)); +const showResults = computed(() => !_.isUndefined(leftJson.value) && !_.isUndefined(rightJson.value)); +</script> + +<style lang="less" scoped> +::v-deep(.diffs-viewer) { + color: v-bind('appTheme.text.mutedColor'); + + & > ul { + padding-left: 0 !important; + } + + ul { + list-style: none; + padding-left: 20px; + margin: 0; + + li { + .updated-line { + padding: 3px 0; + } + + .result, + .array, + .object, + .value { + &:not(:last-child) { + margin-right: 4px; + } + + &.added { + padding: 3px 5px; + border-radius: 4px; + background-color: v-bind('appTheme.success.colorFaded'); + color: v-bind('appTheme.success.color'); + .key { + color: inherit; + } + } + + &.removed { + padding: 3px 5px; + border-radius: 4px; + background-color: v-bind('appTheme.error.colorFaded'); + color: v-bind('appTheme.error.color'); + + .key { + color: inherit; + } + } + } + + .value { + cursor: pointer; + border: 1px solid transparent; + transition: border-color 0.2s ease-in-out; + + &.added:hover { + border-color: v-bind('appTheme.success.color'); + } + + &.removed:hover { + border-color: v-bind('appTheme.error.color'); + } + } + + .added .added, + .removed .removed { + background-color: transparent; + color: inherit; + } + + .key { + font-weight: 500; + color: v-bind('appTheme.text.baseColor'); + } + } + } +} +</style> diff --git a/src/tools/json-diff/index.ts b/src/tools/json-diff/index.ts new file mode 100644 index 0000000..7c4c1ee --- /dev/null +++ b/src/tools/json-diff/index.ts @@ -0,0 +1,12 @@ +import { CompareArrowsRound } from '@vicons/material'; +import { defineTool } from '../tool'; + +export const tool = defineTool({ + name: 'JSON diff', + path: '/json-diff', + description: 'Compare two JSON objects and get the differences between them.', + keywords: ['json', 'diff', 'compare', 'difference', 'object', 'data'], + component: () => import('./json-diff.vue'), + icon: CompareArrowsRound, + createdAt: new Date('2023-04-20'), +}); diff --git a/src/tools/json-diff/json-diff.e2e.spec.ts b/src/tools/json-diff/json-diff.e2e.spec.ts new file mode 100644 index 0000000..5370060 --- /dev/null +++ b/src/tools/json-diff/json-diff.e2e.spec.ts @@ -0,0 +1,39 @@ +import { test, expect } from '@playwright/test'; + +test.describe('Tool - JSON diff', () => { + test.beforeEach(async ({ page }) => { + await page.goto('/json-diff'); + }); + + test('Has correct title', async ({ page }) => { + await expect(page).toHaveTitle('JSON diff - IT Tools'); + }); + + test('Identical JSONs have a custom result message', async ({ page }) => { + await page.getByTestId('leftJson').fill('{"foo":"bar"}'); + await page.getByTestId('rightJson').fill('{ "foo": "bar" } '); + + const result = await page.getByTestId('diff-result').innerText(); + + expect(result).toContain('The provided JSONs are the same'); + }); + + test('Different JSONs have differences listed', async ({ page }) => { + await page.getByTestId('leftJson').fill('{"foo":"bar"}'); + await page.getByTestId('rightJson').fill('{"foo":"buz","baz":"qux"}'); + + const result = await page.getByTestId('diff-result').innerText(); + + expect(result).toContain(`{\nfoo: "bar""buz",\nbaz: "qux",\n},`); + }); + + test('Different JSONs have only differences listed when "Only show differences" is checked', async ({ page }) => { + await page.getByTestId('leftJson').fill('{"foo":"bar"}'); + await page.getByTestId('rightJson').fill('{"foo":"bar","baz":"qux"}'); + await page.getByRole('switch').click(); + + const result = await page.getByTestId('diff-result').innerText(); + + expect(result).toContain(`{\nbaz: "qux",\n},`); + }); +}); diff --git a/src/tools/json-diff/json-diff.models.test.ts b/src/tools/json-diff/json-diff.models.test.ts new file mode 100644 index 0000000..b8e699f --- /dev/null +++ b/src/tools/json-diff/json-diff.models.test.ts @@ -0,0 +1,80 @@ +import { expect, describe, it } from 'vitest'; +import { diff } from './json-diff.models'; + +describe('json-diff models', () => { + describe('diff', () => { + it('list object differences', () => { + const obj = { a: 1, b: 2 }; + const newObj = { a: 1, b: 2, c: 3 }; + const result = diff(obj, newObj); + + expect(result).toEqual({ + key: '', + type: 'object', + children: [ + { + key: 'a', + type: 'value', + value: 1, + oldValue: 1, + status: 'unchanged', + }, + { + key: 'b', + type: 'value', + value: 2, + oldValue: 2, + status: 'unchanged', + }, + { + key: 'c', + type: 'value', + value: 3, + oldValue: undefined, + status: 'added', + }, + ], + oldValue: { a: 1, b: 2 }, + value: { a: 1, b: 2, c: 3 }, + status: 'children-updated', + }); + }); + + it('list array differences', () => { + const obj = [1, 2]; + const newObj = [1, 2, 3]; + const result = diff(obj, newObj); + + expect(result).toEqual({ + key: '', + type: 'array', + children: [ + { + key: 0, + type: 'value', + value: 1, + oldValue: 1, + status: 'unchanged', + }, + { + key: 1, + type: 'value', + value: 2, + oldValue: 2, + status: 'unchanged', + }, + { + key: 2, + type: 'value', + value: 3, + oldValue: undefined, + status: 'added', + }, + ], + oldValue: [1, 2], + value: [1, 2, 3], + status: 'children-updated', + }); + }); + }); +}); diff --git a/src/tools/json-diff/json-diff.models.ts b/src/tools/json-diff/json-diff.models.ts new file mode 100644 index 0000000..ee6ba4b --- /dev/null +++ b/src/tools/json-diff/json-diff.models.ts @@ -0,0 +1,140 @@ +import _ from 'lodash'; +import type { Difference, DifferenceStatus } from './json-diff.types'; + +export { diff }; + +function diff( + obj: unknown, + newObj: unknown, + { onlyShowDifferences = false }: { onlyShowDifferences?: boolean } = {}, +): Difference { + if (_.isArray(obj) && _.isArray(newObj)) { + return { + key: '', + type: 'array', + children: diffArrays(obj, newObj, { onlyShowDifferences }), + oldValue: obj, + value: newObj, + status: getStatus(obj, newObj), + }; + } + + if (_.isObject(obj) && _.isObject(newObj)) { + return { + key: '', + type: 'object', + children: diffObjects(obj as Record<string, unknown>, newObj as Record<string, unknown>, { onlyShowDifferences }), + oldValue: obj, + value: newObj, + status: getStatus(obj, newObj), + }; + } + + return { + key: '', + type: 'value', + oldValue: obj, + value: newObj, + status: getStatus(obj, newObj), + }; +} + +function diffObjects( + obj: Record<string, unknown>, + newObj: Record<string, unknown>, + { onlyShowDifferences = false }: { onlyShowDifferences?: boolean } = {}, +): Difference[] { + const keys = Object.keys({ ...obj, ...newObj }); + return keys + .map((key) => createDifference(obj?.[key], newObj?.[key], key, { onlyShowDifferences })) + .filter((diff) => !onlyShowDifferences || diff.status !== 'unchanged'); +} + +function createDifference( + value: unknown, + newValue: unknown, + key: string | number, + { onlyShowDifferences = false }: { onlyShowDifferences?: boolean } = {}, +): Difference { + const type = getType(value); + + if (type === 'object') { + return { + key, + type, + children: diffObjects(value as Record<string, unknown>, newValue as Record<string, unknown>, { + onlyShowDifferences, + }), + oldValue: value, + value: newValue, + status: getStatus(value, newValue), + }; + } + + if (type === 'array') { + return { + key, + type, + children: diffArrays(value as unknown[], newValue as unknown[], { onlyShowDifferences }), + value: newValue, + oldValue: value, + status: getStatus(value, newValue), + }; + } + + return { + key, + type, + value: newValue, + oldValue: value, + status: getStatus(value, newValue), + }; +} + +function diffArrays( + arr: unknown[], + newArr: unknown[], + { onlyShowDifferences = false }: { onlyShowDifferences?: boolean } = {}, +): Difference[] { + const maxLength = Math.max(0, arr?.length, newArr?.length); + return Array.from({ length: maxLength }, (_, i) => + createDifference(arr?.[i], newArr?.[i], i, { onlyShowDifferences }), + ).filter((diff) => !onlyShowDifferences || diff.status !== 'unchanged'); +} + +function getType(value: unknown): 'object' | 'array' | 'value' { + if (value === null) { + return 'value'; + } + if (Array.isArray(value)) { + return 'array'; + } + if (typeof value === 'object') { + return 'object'; + } + return 'value'; +} + +function getStatus(value: unknown, newValue: unknown): DifferenceStatus { + if (value === undefined) { + return 'added'; + } + + if (newValue === undefined) { + return 'removed'; + } + + const bothAreObjects = getType(value) === 'object' && getType(newValue) === 'object'; + const bothAreArrays = getType(value) === 'array' && getType(newValue) === 'array'; + const bothAreDeepEqual = _.isEqual(value, newValue); + + if (bothAreDeepEqual) { + return 'unchanged'; + } + + if (bothAreObjects || bothAreArrays) { + return 'children-updated'; + } + + return 'updated'; +} diff --git a/src/tools/json-diff/json-diff.types.ts b/src/tools/json-diff/json-diff.types.ts new file mode 100644 index 0000000..8cf58ad --- /dev/null +++ b/src/tools/json-diff/json-diff.types.ts @@ -0,0 +1,29 @@ +export type DifferenceStatus = 'added' | 'removed' | 'updated' | 'unchanged' | 'children-updated'; + +export type ObjectDifference = { + key: string | number; + type: 'object'; + children: Difference[]; + status: DifferenceStatus; + oldValue: unknown; + value: unknown; +}; + +export type ValueDifference = { + key: string | number; + type: 'value'; + value: unknown; + oldValue: unknown; + status: DifferenceStatus; +}; + +export type ArrayDifference = { + key: number | string; + type: 'array'; + children: Difference[]; + status: DifferenceStatus; + oldValue: unknown; + value: unknown; +}; + +export type Difference = ObjectDifference | ValueDifference | ArrayDifference; diff --git a/src/tools/json-diff/json-diff.vue b/src/tools/json-diff/json-diff.vue new file mode 100644 index 0000000..df106c6 --- /dev/null +++ b/src/tools/json-diff/json-diff.vue @@ -0,0 +1,59 @@ +<template> + <n-form-item label="Your first json" v-bind="leftJsonValidation.attrs"> + <n-input + v-model:value="rawLeftJson" + placeholder="Paste your first json here..." + type="textarea" + rows="20" + autocomplete="off" + autocorrect="off" + autocapitalize="off" + spellcheck="false" + :input-props="{ 'data-test-id': 'leftJson' }" + /> + </n-form-item> + <n-form-item label="Your json to compare" v-bind="rightJsonValidation.attrs"> + <n-input + v-model:value="rawRightJson" + placeholder="Paste your json to compare here..." + type="textarea" + rows="20" + autocomplete="off" + autocorrect="off" + autocapitalize="off" + spellcheck="false" + :input-props="{ 'data-test-id': 'rightJson' }" + /> + </n-form-item> + + <DiffsViewer :left-json="leftJson" :right-json="rightJson" /> +</template> + +<script setup lang="ts"> +import JSON5 from 'json5'; + +import { withDefaultOnError } from '@/utils/defaults'; +import { useValidation } from '@/composable/validation'; +import { isNotThrowing } from '@/utils/boolean'; +import DiffsViewer from './diff-viewer/diff-viewer.vue'; + +const rawLeftJson = ref(''); +const rawRightJson = ref(''); + +const leftJson = computed(() => withDefaultOnError(() => JSON5.parse(rawLeftJson.value), undefined)); +const rightJson = computed(() => withDefaultOnError(() => JSON5.parse(rawRightJson.value), undefined)); + +const createJsonValidation = (json: Ref) => + useValidation({ + source: json, + rules: [ + { + validator: (value) => value === '' || isNotThrowing(() => JSON5.parse(value)), + message: 'Invalid JSON', + }, + ], + }); + +const leftJsonValidation = createJsonValidation(rawLeftJson); +const rightJsonValidation = createJsonValidation(rawRightJson); +</script> |