mirrors/it-tools
1
0
Fork 0
mirror of https://github.com/CorentinTh/it-tools.git synced 2025-04-20 06:55:06 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

feat(new-tool): diff of two json objects

Browse source
This commit is contained in:
Corentin Thomasset 2023-04-22 00:49:03 +02:00 • committed by Corentin THOMASSET
parent 61ece2387f
commit 362f2fa280
12 changed files with 751 additions and 134 deletions
Download patch file Download diff file Expand all files Collapse all files

264
components.d.ts vendored
View file

@ -5,139 +5,141 @@
// Read more: https://github.com/vuejs/core/pull/3399
import '@vue/runtime-core'
export {};
export {}
declare module '@vue/runtime-core' {
export interface GlobalComponents {
'404.page': typeof import('./src/pages/404.page.vue')['default'];
About: typeof import('./src/pages/About.vue')['default'];
App: typeof import('./src/App.vue')['default'];
'Base.layout': typeof import('./src/layouts/base.layout.vue')['default'];
Base64FileConverter: typeof import('./src/tools/base64-file-converter/base64-file-converter.vue')['default'];
Base64StringConverter: typeof import('./src/tools/base64-string-converter/base64-string-converter.vue')['default'];
BasicAuthGenerator: typeof import('./src/tools/basic-auth-generator/basic-auth-generator.vue')['default'];
Bcrypt: typeof import('./src/tools/bcrypt/bcrypt.vue')['default'];
BenchmarkBuilder: typeof import('./src/tools/benchmark-builder/benchmark-builder.vue')['default'];
Bip39Generator: typeof import('./src/tools/bip39-generator/bip39-generator.vue')['default'];
CaseConverter: typeof import('./src/tools/case-converter/case-converter.vue')['default'];
CButton: typeof import('./src/ui/c-button/c-button.vue')['default'];
CCard: typeof import('./src/ui/c-card/c-card.vue')['default'];
ChmodCalculator: typeof import('./src/tools/chmod-calculator/chmod-calculator.vue')['default'];
Chronometer: typeof import('./src/tools/chronometer/chronometer.vue')['default'];
CLink: typeof import('./src/ui/c-link/c-link.vue')['default'];
CollapsibleToolMenu: typeof import('./src/components/CollapsibleToolMenu.vue')['default'];
ColorConverter: typeof import('./src/tools/color-converter/color-converter.vue')['default'];
ColoredCard: typeof import('./src/components/ColoredCard.vue')['default'];
CopyableIpLike: typeof import('./src/tools/ipv4-subnet-calculator/copyable-ip-like.vue')['default'];
CrontabGenerator: typeof import('./src/tools/crontab-generator/crontab-generator.vue')['default'];
DateTimeConverter: typeof import('./src/tools/date-time-converter/date-time-converter.vue')['default'];
DeviceInformation: typeof import('./src/tools/device-information/device-information.vue')['default'];
DockerRunToDockerComposeConverter: typeof import('./src/tools/docker-run-to-docker-compose-converter/docker-run-to-docker-compose-converter.vue')['default'];
DynamicValues: typeof import('./src/tools/benchmark-builder/dynamic-values.vue')['default'];
Editor: typeof import('./src/tools/html-wysiwyg-editor/editor/editor.vue')['default'];
Encryption: typeof import('./src/tools/encryption/encryption.vue')['default'];
EtaCalculator: typeof import('./src/tools/eta-calculator/eta-calculator.vue')['default'];
FavoriteButton: typeof import('./src/components/FavoriteButton.vue')['default'];
FormatTransformer: typeof import('./src/components/FormatTransformer.vue')['default'];
GitMemo: typeof import('./src/tools/git-memo/git-memo.md')['default'];
HashText: typeof import('./src/tools/hash-text/hash-text.vue')['default'];
HmacGenerator: typeof import('./src/tools/hmac-generator/hmac-generator.vue')['default'];
'Home.page': typeof import('./src/pages/Home.page.vue')['default'];
HtmlEntities: typeof import('./src/tools/html-entities/html-entities.vue')['default'];
HtmlWysiwygEditor: typeof import('./src/tools/html-wysiwyg-editor/html-wysiwyg-editor.vue')['default'];
HttpStatusCodes: typeof import('./src/tools/http-status-codes/http-status-codes.vue')['default'];
InputCopyable: typeof import('./src/components/InputCopyable.vue')['default'];
IntegerBaseConverter: typeof import('./src/tools/integer-base-converter/integer-base-converter.vue')['default'];
Ipv4AddressConverter: typeof import('./src/tools/ipv4-address-converter/ipv4-address-converter.vue')['default'];
Ipv4RangeExpander: typeof import('./src/tools/ipv4-range-expander/ipv4-range-expander.vue')['default'];
Ipv4SubnetCalculator: typeof import('./src/tools/ipv4-subnet-calculator/ipv4-subnet-calculator.vue')['default'];
Ipv6UlaGenerator: typeof import('./src/tools/ipv6-ula-generator/ipv6-ula-generator.vue')['default'];
JsonMinify: typeof import('./src/tools/json-minify/json-minify.vue')['default'];
JsonToYaml: typeof import('./src/tools/json-to-yaml-converter/json-to-yaml.vue')['default'];
JsonViewer: typeof import('./src/tools/json-viewer/json-viewer.vue')['default'];
JwtParser: typeof import('./src/tools/jwt-parser/jwt-parser.vue')['default'];
KeycodeInfo: typeof import('./src/tools/keycode-info/keycode-info.vue')['default'];
LoremIpsumGenerator: typeof import('./src/tools/lorem-ipsum-generator/lorem-ipsum-generator.vue')['default'];
MacAddressLookup: typeof import('./src/tools/mac-address-lookup/mac-address-lookup.vue')['default'];
MathEvaluator: typeof import('./src/tools/math-evaluator/math-evaluator.vue')['default'];
MenuBar: typeof import('./src/tools/html-wysiwyg-editor/editor/menu-bar.vue')['default'];
MenuBarItem: typeof import('./src/tools/html-wysiwyg-editor/editor/menu-bar-item.vue')['default'];
MenuIconItem: typeof import('./src/components/MenuIconItem.vue')['default'];
MenuLayout: typeof import('./src/components/MenuLayout.vue')['default'];
MetaTagGenerator: typeof import('./src/tools/meta-tag-generator/meta-tag-generator.vue')['default'];
MimeTypes: typeof import('./src/tools/mime-types/mime-types.vue')['default'];
NAlert: typeof import('naive-ui')['NAlert'];
NAutoComplete: typeof import('naive-ui')['NAutoComplete'];
NavbarButtons: typeof import('./src/components/NavbarButtons.vue')['default'];
NButton: typeof import('naive-ui')['NButton'];
NCard: typeof import('naive-ui')['NCard'];
NCheckbox: typeof import('naive-ui')['NCheckbox'];
NCode: typeof import('naive-ui')['NCode'];
NCollapseTransition: typeof import('naive-ui')['NCollapseTransition'];
NColorPicker: typeof import('naive-ui')['NColorPicker'];
NConfigProvider: typeof import('naive-ui')['NConfigProvider'];
NDatePicker: typeof import('naive-ui')['NDatePicker'];
NDivider: typeof import('naive-ui')['NDivider'];
NDynamicInput: typeof import('naive-ui')['NDynamicInput'];
NEllipsis: typeof import('naive-ui')['NEllipsis'];
NForm: typeof import('naive-ui')['NForm'];
NFormItem: typeof import('naive-ui')['NFormItem'];
NGi: typeof import('naive-ui')['NGi'];
NGrid: typeof import('naive-ui')['NGrid'];
NH1: typeof import('naive-ui')['NH1'];
NH2: typeof import('naive-ui')['NH2'];
NH3: typeof import('naive-ui')['NH3'];
NIcon: typeof import('naive-ui')['NIcon'];
NImage: typeof import('naive-ui')['NImage'];
NInput: typeof import('naive-ui')['NInput'];
NInputGroup: typeof import('naive-ui')['NInputGroup'];
NInputGroupLabel: typeof import('naive-ui')['NInputGroupLabel'];
NInputNumber: typeof import('naive-ui')['NInputNumber'];
NLayout: typeof import('naive-ui')['NLayout'];
NLayoutSider: typeof import('naive-ui')['NLayoutSider'];
NMenu: typeof import('naive-ui')['NMenu'];
NP: typeof import('naive-ui')['NP'];
NPageHeader: typeof import('naive-ui')['NPageHeader'];
NProgress: typeof import('naive-ui')['NProgress'];
NScrollbar: typeof import('naive-ui')['NScrollbar'];
NSelect: typeof import('naive-ui')['NSelect'];
NSlider: typeof import('naive-ui')['NSlider'];
NSpace: typeof import('naive-ui')['NSpace'];
NStatistic: typeof import('naive-ui')['NStatistic'];
NSwitch: typeof import('naive-ui')['NSwitch'];
NTable: typeof import('naive-ui')['NTable'];
NTag: typeof import('naive-ui')['NTag'];
NText: typeof import('naive-ui')['NText'];
NTooltip: typeof import('naive-ui')['NTooltip'];
NUpload: typeof import('naive-ui')['NUpload'];
NUploadDragger: typeof import('naive-ui')['NUploadDragger'];
OtpCodeGeneratorAndValidator: typeof import('./src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue')['default'];
QrCodeGenerator: typeof import('./src/tools/qr-code-generator/qr-code-generator.vue')['default'];
RandomPortGenerator: typeof import('./src/tools/random-port-generator/random-port-generator.vue')['default'];
ResultRow: typeof import('./src/tools/ipv4-range-expander/result-row.vue')['default'];
RomanNumeralConverter: typeof import('./src/tools/roman-numeral-converter/roman-numeral-converter.vue')['default'];
RouterLink: typeof import('vue-router')['RouterLink'];
RouterView: typeof import('vue-router')['RouterView'];
RsaKeyPairGenerator: typeof import('./src/tools/rsa-key-pair-generator/rsa-key-pair-generator.vue')['default'];
SearchBar: typeof import('./src/components/SearchBar.vue')['default'];
SearchBarItem: typeof import('./src/components/SearchBarItem.vue')['default'];
SlugifyString: typeof import('./src/tools/slugify-string/slugify-string.vue')['default'];
SpanCopyable: typeof import('./src/components/SpanCopyable.vue')['default'];
SqlPrettify: typeof import('./src/tools/sql-prettify/sql-prettify.vue')['default'];
SvgPlaceholderGenerator: typeof import('./src/tools/svg-placeholder-generator/svg-placeholder-generator.vue')['default'];
TemperatureConverter: typeof import('./src/tools/temperature-converter/temperature-converter.vue')['default'];
TextareaCopyable: typeof import('./src/components/TextareaCopyable.vue')['default'];
TextStatistics: typeof import('./src/tools/text-statistics/text-statistics.vue')['default'];
TextToNatoAlphabet: typeof import('./src/tools/text-to-nato-alphabet/text-to-nato-alphabet.vue')['default'];
TokenDisplay: typeof import('./src/tools/otp-code-generator-and-validator/token-display.vue')['default'];
'TokenGenerator.tool': typeof import('./src/tools/token-generator/token-generator.tool.vue')['default'];
'Tool.layout': typeof import('./src/layouts/tool.layout.vue')['default'];
ToolCard: typeof import('./src/components/ToolCard.vue')['default'];
UrlEncoder: typeof import('./src/tools/url-encoder/url-encoder.vue')['default'];
UrlParser: typeof import('./src/tools/url-parser/url-parser.vue')['default'];
UserAgentParser: typeof import('./src/tools/user-agent-parser/user-agent-parser.vue')['default'];
UserAgentResultCards: typeof import('./src/tools/user-agent-parser/user-agent-result-cards.vue')['default'];
UuidGenerator: typeof import('./src/tools/uuid-generator/uuid-generator.vue')['default'];
YamlToJson: typeof import('./src/tools/yaml-to-json-converter/yaml-to-json.vue')['default'];
'404.page': typeof import('./src/pages/404.page.vue')['default']
About: typeof import('./src/pages/About.vue')['default']
App: typeof import('./src/App.vue')['default']
'Base.layout': typeof import('./src/layouts/base.layout.vue')['default']
Base64FileConverter: typeof import('./src/tools/base64-file-converter/base64-file-converter.vue')['default']
Base64StringConverter: typeof import('./src/tools/base64-string-converter/base64-string-converter.vue')['default']
BasicAuthGenerator: typeof import('./src/tools/basic-auth-generator/basic-auth-generator.vue')['default']
Bcrypt: typeof import('./src/tools/bcrypt/bcrypt.vue')['default']
BenchmarkBuilder: typeof import('./src/tools/benchmark-builder/benchmark-builder.vue')['default']
Bip39Generator: typeof import('./src/tools/bip39-generator/bip39-generator.vue')['default']
CaseConverter: typeof import('./src/tools/case-converter/case-converter.vue')['default']
CButton: typeof import('./src/ui/c-button/c-button.vue')['default']
CCard: typeof import('./src/ui/c-card/c-card.vue')['default']
ChmodCalculator: typeof import('./src/tools/chmod-calculator/chmod-calculator.vue')['default']
Chronometer: typeof import('./src/tools/chronometer/chronometer.vue')['default']
CLink: typeof import('./src/ui/c-link/c-link.vue')['default']
CollapsibleToolMenu: typeof import('./src/components/CollapsibleToolMenu.vue')['default']
ColorConverter: typeof import('./src/tools/color-converter/color-converter.vue')['default']
ColoredCard: typeof import('./src/components/ColoredCard.vue')['default']
CopyableIpLike: typeof import('./src/tools/ipv4-subnet-calculator/copyable-ip-like.vue')['default']
CrontabGenerator: typeof import('./src/tools/crontab-generator/crontab-generator.vue')['default']
DateTimeConverter: typeof import('./src/tools/date-time-converter/date-time-converter.vue')['default']
DeviceInformation: typeof import('./src/tools/device-information/device-information.vue')['default']
DiffViewer: typeof import('./src/tools/json-diff/diff-viewer/diff-viewer.vue')['default']
DockerRunToDockerComposeConverter: typeof import('./src/tools/docker-run-to-docker-compose-converter/docker-run-to-docker-compose-converter.vue')['default']
DynamicValues: typeof import('./src/tools/benchmark-builder/dynamic-values.vue')['default']
Editor: typeof import('./src/tools/html-wysiwyg-editor/editor/editor.vue')['default']
Encryption: typeof import('./src/tools/encryption/encryption.vue')['default']
EtaCalculator: typeof import('./src/tools/eta-calculator/eta-calculator.vue')['default']
FavoriteButton: typeof import('./src/components/FavoriteButton.vue')['default']
FormatTransformer: typeof import('./src/components/FormatTransformer.vue')['default']
GitMemo: typeof import('./src/tools/git-memo/git-memo.md')['default']
HashText: typeof import('./src/tools/hash-text/hash-text.vue')['default']
HmacGenerator: typeof import('./src/tools/hmac-generator/hmac-generator.vue')['default']
'Home.page': typeof import('./src/pages/Home.page.vue')['default']
HtmlEntities: typeof import('./src/tools/html-entities/html-entities.vue')['default']
HtmlWysiwygEditor: typeof import('./src/tools/html-wysiwyg-editor/html-wysiwyg-editor.vue')['default']
HttpStatusCodes: typeof import('./src/tools/http-status-codes/http-status-codes.vue')['default']
InputCopyable: typeof import('./src/components/InputCopyable.vue')['default']
IntegerBaseConverter: typeof import('./src/tools/integer-base-converter/integer-base-converter.vue')['default']
Ipv4AddressConverter: typeof import('./src/tools/ipv4-address-converter/ipv4-address-converter.vue')['default']
Ipv4RangeExpander: typeof import('./src/tools/ipv4-range-expander/ipv4-range-expander.vue')['default']
Ipv4SubnetCalculator: typeof import('./src/tools/ipv4-subnet-calculator/ipv4-subnet-calculator.vue')['default']
Ipv6UlaGenerator: typeof import('./src/tools/ipv6-ula-generator/ipv6-ula-generator.vue')['default']
JsonDiff: typeof import('./src/tools/json-diff/json-diff.vue')['default']
JsonMinify: typeof import('./src/tools/json-minify/json-minify.vue')['default']
JsonToYaml: typeof import('./src/tools/json-to-yaml-converter/json-to-yaml.vue')['default']
JsonViewer: typeof import('./src/tools/json-viewer/json-viewer.vue')['default']
JwtParser: typeof import('./src/tools/jwt-parser/jwt-parser.vue')['default']
KeycodeInfo: typeof import('./src/tools/keycode-info/keycode-info.vue')['default']
LoremIpsumGenerator: typeof import('./src/tools/lorem-ipsum-generator/lorem-ipsum-generator.vue')['default']
MacAddressLookup: typeof import('./src/tools/mac-address-lookup/mac-address-lookup.vue')['default']
MathEvaluator: typeof import('./src/tools/math-evaluator/math-evaluator.vue')['default']
MenuBar: typeof import('./src/tools/html-wysiwyg-editor/editor/menu-bar.vue')['default']
MenuBarItem: typeof import('./src/tools/html-wysiwyg-editor/editor/menu-bar-item.vue')['default']
MenuIconItem: typeof import('./src/components/MenuIconItem.vue')['default']
MenuLayout: typeof import('./src/components/MenuLayout.vue')['default']
MetaTagGenerator: typeof import('./src/tools/meta-tag-generator/meta-tag-generator.vue')['default']
MimeTypes: typeof import('./src/tools/mime-types/mime-types.vue')['default']
NAlert: typeof import('naive-ui')['NAlert']
NAutoComplete: typeof import('naive-ui')['NAutoComplete']
NavbarButtons: typeof import('./src/components/NavbarButtons.vue')['default']
NButton: typeof import('naive-ui')['NButton']
NCard: typeof import('naive-ui')['NCard']
NCheckbox: typeof import('naive-ui')['NCheckbox']
NCode: typeof import('naive-ui')['NCode']
NCollapseTransition: typeof import('naive-ui')['NCollapseTransition']
NColorPicker: typeof import('naive-ui')['NColorPicker']
NConfigProvider: typeof import('naive-ui')['NConfigProvider']
NDatePicker: typeof import('naive-ui')['NDatePicker']
NDivider: typeof import('naive-ui')['NDivider']
NDynamicInput: typeof import('naive-ui')['NDynamicInput']
NEllipsis: typeof import('naive-ui')['NEllipsis']
NForm: typeof import('naive-ui')['NForm']
NFormItem: typeof import('naive-ui')['NFormItem']
NGi: typeof import('naive-ui')['NGi']
NGrid: typeof import('naive-ui')['NGrid']
NH1: typeof import('naive-ui')['NH1']
NH2: typeof import('naive-ui')['NH2']
NH3: typeof import('naive-ui')['NH3']
NIcon: typeof import('naive-ui')['NIcon']
NImage: typeof import('naive-ui')['NImage']
NInput: typeof import('naive-ui')['NInput']
NInputGroup: typeof import('naive-ui')['NInputGroup']
NInputGroupLabel: typeof import('naive-ui')['NInputGroupLabel']
NInputNumber: typeof import('naive-ui')['NInputNumber']
NLayout: typeof import('naive-ui')['NLayout']
NLayoutSider: typeof import('naive-ui')['NLayoutSider']
NMenu: typeof import('naive-ui')['NMenu']
NP: typeof import('naive-ui')['NP']
NPageHeader: typeof import('naive-ui')['NPageHeader']
NProgress: typeof import('naive-ui')['NProgress']
NScrollbar: typeof import('naive-ui')['NScrollbar']
NSelect: typeof import('naive-ui')['NSelect']
NSlider: typeof import('naive-ui')['NSlider']
NSpace: typeof import('naive-ui')['NSpace']
NStatistic: typeof import('naive-ui')['NStatistic']
NSwitch: typeof import('naive-ui')['NSwitch']
NTable: typeof import('naive-ui')['NTable']
NTag: typeof import('naive-ui')['NTag']
NText: typeof import('naive-ui')['NText']
NTooltip: typeof import('naive-ui')['NTooltip']
NUpload: typeof import('naive-ui')['NUpload']
NUploadDragger: typeof import('naive-ui')['NUploadDragger']
OtpCodeGeneratorAndValidator: typeof import('./src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue')['default']
QrCodeGenerator: typeof import('./src/tools/qr-code-generator/qr-code-generator.vue')['default']
RandomPortGenerator: typeof import('./src/tools/random-port-generator/random-port-generator.vue')['default']
ResultRow: typeof import('./src/tools/ipv4-range-expander/result-row.vue')['default']
RomanNumeralConverter: typeof import('./src/tools/roman-numeral-converter/roman-numeral-converter.vue')['default']
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']
RsaKeyPairGenerator: typeof import('./src/tools/rsa-key-pair-generator/rsa-key-pair-generator.vue')['default']
SearchBar: typeof import('./src/components/SearchBar.vue')['default']
SearchBarItem: typeof import('./src/components/SearchBarItem.vue')['default']
SlugifyString: typeof import('./src/tools/slugify-string/slugify-string.vue')['default']
SpanCopyable: typeof import('./src/components/SpanCopyable.vue')['default']
SqlPrettify: typeof import('./src/tools/sql-prettify/sql-prettify.vue')['default']
SvgPlaceholderGenerator: typeof import('./src/tools/svg-placeholder-generator/svg-placeholder-generator.vue')['default']
TemperatureConverter: typeof import('./src/tools/temperature-converter/temperature-converter.vue')['default']
TextareaCopyable: typeof import('./src/components/TextareaCopyable.vue')['default']
TextStatistics: typeof import('./src/tools/text-statistics/text-statistics.vue')['default']
TextToNatoAlphabet: typeof import('./src/tools/text-to-nato-alphabet/text-to-nato-alphabet.vue')['default']
TokenDisplay: typeof import('./src/tools/otp-code-generator-and-validator/token-display.vue')['default']
'TokenGenerator.tool': typeof import('./src/tools/token-generator/token-generator.tool.vue')['default']
'Tool.layout': typeof import('./src/layouts/tool.layout.vue')['default']
ToolCard: typeof import('./src/components/ToolCard.vue')['default']
UrlEncoder: typeof import('./src/tools/url-encoder/url-encoder.vue')['default']
UrlParser: typeof import('./src/tools/url-parser/url-parser.vue')['default']
UserAgentParser: typeof import('./src/tools/user-agent-parser/user-agent-parser.vue')['default']
UserAgentResultCards: typeof import('./src/tools/user-agent-parser/user-agent-result-cards.vue')['default']
UuidGenerator: typeof import('./src/tools/uuid-generator/uuid-generator.vue')['default']
YamlToJson: typeof import('./src/tools/yaml-to-json-converter/yaml-to-json.vue')['default']
}
}

5
src/composable/copy.ts
View file

@ -1,8 +1,7 @@
import { useClipboard } from '@vueuse/core';
import { useClipboard, type MaybeRef } from '@vueuse/core';
import { useMessage } from 'naive-ui';
import type { Ref } from 'vue';
export function useCopy({ source, text = 'Copied to the clipboard' }: { source: Ref; text?: string }) {
export function useCopy({ source, text = 'Copied to the clipboard' }: { source: MaybeRef<string>; text?: string }) {
const { copy } = useClipboard({ source });
const message = useMessage();

2
src/tools/index.ts
View file

@ -1,6 +1,7 @@
import { tool as base64FileConverter } from './base64-file-converter';
import { tool as base64StringConverter } from './base64-string-converter';
import { tool as basicAuthGenerator } from './basic-auth-generator';
import { tool as jsonDiff } from './json-diff';
import { tool as ipv4RangeExpander } from './ipv4-range-expander';
import { tool as httpStatusCodes } from './http-status-codes';
import { tool as yamlToJson } from './yaml-to-json-converter';
@ -91,6 +92,7 @@ export const toolsByCategory: ToolCategory[] = [
htmlWysiwygEditor,
userAgentParser,
httpStatusCodes,
jsonDiff,
],
},
{

119
src/tools/json-diff/diff-viewer/diff-viewer.models.tsx Normal file
View file

@ -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>
);
};

110
src/tools/json-diff/diff-viewer/diff-viewer.vue Normal file
View file

@ -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>

12
src/tools/json-diff/index.ts Normal file
View file

@ -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'),
});

39
src/tools/json-diff/json-diff.e2e.spec.ts Normal file
View file

@ -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},`);
});
});

80
src/tools/json-diff/json-diff.models.test.ts Normal file
View file

@ -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',
});
});
});
});

140
src/tools/json-diff/json-diff.models.ts Normal file
View file

@ -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';
}

29
src/tools/json-diff/json-diff.types.ts Normal file
View file

@ -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;

59
src/tools/json-diff/json-diff.vue Normal file
View file

@ -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>

26
src/ui/theme/themes.ts
View file

@ -4,6 +4,7 @@ export const { themes: appThemes, useTheme: useAppTheme } = defineThemes({
light: {
text: {
baseColor: 'rgb(51, 54, 57)',
mutedColor: 'rgba(118, 124, 130)',
},
primary: {
@ -17,10 +18,23 @@ export const { themes: appThemes, useTheme: useAppTheme } = defineThemes({
colorHover: '#f59e0b',
colorPressed: '#f59e0b',
},
success: {
color: '#18a058',
colorHover: '#36ad6a',
colorPressed: '#0c7a43',
colorFaded: '#18a0582f',
},
error: {
color: '#d03050',
colorHover: '#de576d',
colorPressed: '#ab1f3f',
colorFaded: '#d030502a',
},
},
dark: {
text: {
baseColor: 'rgba(255, 255, 255, 0.82)',
mutedColor: 'rgba(255, 255, 255, 0.5)',
},
primary: {
@ -33,5 +47,17 @@ export const { themes: appThemes, useTheme: useAppTheme } = defineThemes({
colorHover: '#f59e0b',
colorPressed: '#f59e0b',
},
success: {
color: '#18a058',
colorHover: '#36ad6a',
colorPressed: '#0c7a43',
colorFaded: '#18a0582f',
},
error: {
color: '#e88080',
colorHover: '#e98b8b',
colorPressed: '#e57272',
colorFaded: '#e8808029',
},
},
});