From 362f2fa280fdab210074e9a7e01dde6187924d29 Mon Sep 17 00:00:00 2001 From: Corentin Thomasset Date: Sat, 22 Apr 2023 00:49:03 +0200 Subject: [PATCH] feat(new-tool): diff of two json objects --- components.d.ts | 264 +++++++++--------- src/composable/copy.ts | 5 +- src/tools/index.ts | 2 + .../diff-viewer/diff-viewer.models.tsx | 119 ++++++++ .../json-diff/diff-viewer/diff-viewer.vue | 110 ++++++++ src/tools/json-diff/index.ts | 12 + src/tools/json-diff/json-diff.e2e.spec.ts | 39 +++ src/tools/json-diff/json-diff.models.test.ts | 80 ++++++ src/tools/json-diff/json-diff.models.ts | 140 ++++++++++ src/tools/json-diff/json-diff.types.ts | 29 ++ src/tools/json-diff/json-diff.vue | 59 ++++ src/ui/theme/themes.ts | 26 ++ 12 files changed, 751 insertions(+), 134 deletions(-) create mode 100644 src/tools/json-diff/diff-viewer/diff-viewer.models.tsx create mode 100644 src/tools/json-diff/diff-viewer/diff-viewer.vue create mode 100644 src/tools/json-diff/index.ts create mode 100644 src/tools/json-diff/json-diff.e2e.spec.ts create mode 100644 src/tools/json-diff/json-diff.models.test.ts create mode 100644 src/tools/json-diff/json-diff.models.ts create mode 100644 src/tools/json-diff/json-diff.types.ts create mode 100644 src/tools/json-diff/json-diff.vue diff --git a/components.d.ts b/components.d.ts index 700696c9..ae1710f0 100644 --- a/components.d.ts +++ b/components.d.ts @@ -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'] } } diff --git a/src/composable/copy.ts b/src/composable/copy.ts index fb29be56..c389001e 100644 --- a/src/composable/copy.ts +++ b/src/composable/copy.ts @@ -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; text?: string }) { const { copy } = useClipboard({ source }); const message = useMessage(); diff --git a/src/tools/index.ts b/src/tools/index.ts index 016286c2..73f08348 100644 --- a/src/tools/index.ts +++ b/src/tools/index.ts @@ -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, ], }, { 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 00000000..5a19febf --- /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 ( +
+
    {DiffViewer({ diff, showKeys: false })}
+
+ ); +}; + +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 ( +
  • + + {showKeys && ( + <> + {key} + {': '} + + )} + {Value({ value: valueToDisplay, status })} + + , +
    • + ); +}; + +const ComparisonViewer = ({ diff, showKeys }: { diff: Difference; showKeys?: boolean }) => { + const { value, key, oldValue } = diff; + + return ( +
  • + {showKeys && ( + <> + {key} + {': '} + + )} + {Value({ value: oldValue, status: 'removed' })} + {Value({ value, status: 'added' })}, +
    • + ); +}; + +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 ( +
  • +
    + {showKeys && ( + <> + {key} + {': '} + + )} + + {openTag} + {children.length > 0 &&
      {children.map((diff) => DiffViewer({ diff, showKeys: showChildrenKeys }))}
    } + {closeTag + ','} +
    +
    • + ); +}; + +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 ( + + {formatedValue} + + ); +}; 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 00000000..c77d4073 --- /dev/null +++ b/src/tools/json-diff/diff-viewer/diff-viewer.vue @@ -0,0 +1,110 @@ + + + + + diff --git a/src/tools/json-diff/index.ts b/src/tools/json-diff/index.ts new file mode 100644 index 00000000..7c4c1eee --- /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 00000000..5370060b --- /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 00000000..b8e699fc --- /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 00000000..ee6ba4ba --- /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, newObj as Record, { 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, + newObj: Record, + { 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, newValue as Record, { + 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 00000000..8cf58ad7 --- /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 00000000..df106c63 --- /dev/null +++ b/src/tools/json-diff/json-diff.vue @@ -0,0 +1,59 @@ + + + diff --git a/src/ui/theme/themes.ts b/src/ui/theme/themes.ts index 94c87f63..eca63dbd 100644 --- a/src/ui/theme/themes.ts +++ b/src/ui/theme/themes.ts @@ -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', + }, }, });