7 files changed, 92 insertions, 90 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
index 5a19feb..d2117df 100644
--- a/src/tools/json-diff/diff-viewer/diff-viewer.models.tsx
+++ b/src/tools/json-diff/diff-viewer/diff-viewer.models.tsx
@@ -1,16 +1,16 @@
 import _ from 'lodash';
+import type { ArrayDifference, Difference, ObjectDifference } from '../json-diff.types';
 import { useCopy } from '@/composable/copy';
-import type { Difference, ArrayDifference, ObjectDifference } from '../json-diff.types';
 
-export const DiffRootViewer = ({ diff }: { diff: Difference }) => {
+export function 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 }) => {
+function DiffViewer({ diff, showKeys = true }: { diff: Difference; showKeys?: boolean }) {
   const { type, status } = diff;
 
   if (status === 'updated') {
@@ -26,9 +26,9 @@ const DiffViewer = ({ diff, showKeys = true }: { diff: Difference; showKeys?: bo
   }
 
   return LineDiffViewer({ diff, showKeys });
-};
+}
 
-const LineDiffViewer = ({ diff, showKeys }: { diff: Difference; showKeys?: boolean }) => {
+function LineDiffViewer({ diff, showKeys }: { diff: Difference; showKeys?: boolean }) {
   const { value, key, status, oldValue } = diff;
   const valueToDisplay = status === 'removed' ? oldValue : value;
 
@@ -46,9 +46,9 @@ const LineDiffViewer = ({ diff, showKeys }: { diff: Difference; showKeys?: boole
       ,
     </li>
   );
-};
+}
 
-const ComparisonViewer = ({ diff, showKeys }: { diff: Difference; showKeys?: boolean }) => {
+function ComparisonViewer({ diff, showKeys }: { diff: Difference; showKeys?: boolean }) {
   const { value, key, oldValue } = diff;
 
   return (
@@ -63,21 +63,21 @@ const ComparisonViewer = ({ diff, showKeys }: { diff: Difference; showKeys?: boo
       {Value({ value, status: 'added' })},
     </li>
   );
-};
+}
 
-const ChildrenViewer = ({
+function ChildrenViewer({
   diff,
   openTag,
   closeTag,
   showKeys,
   showChildrenKeys = true,
 }: {
-  diff: ArrayDifference | ObjectDifference;
-  showKeys: boolean;
-  showChildrenKeys?: boolean;
-  openTag: string;
-  closeTag: string;
-}) => {
+  diff: ArrayDifference | ObjectDifference
+  showKeys: boolean
+  showChildrenKeys?: boolean
+  openTag: string
+  closeTag: string
+}) {
   const { children, key, status, type } = diff;
 
   return (
@@ -91,12 +91,12 @@ const ChildrenViewer = ({
         )}
 
         {openTag}
-        {children.length > 0 && <ul>{children.map((diff) => DiffViewer({ diff, showKeys: showChildrenKeys }))}</ul>}
-        {closeTag + ','}
+        {children.length > 0 && <ul>{children.map(diff => DiffViewer({ diff, showKeys: showChildrenKeys }))}</ul>}
+        {`${closeTag},`}
       </div>
     </li>
   );
-};
+}
 
 function formatValue(value: unknown) {
   if (_.isNull(value)) {
@@ -106,7 +106,7 @@ function formatValue(value: unknown) {
   return JSON.stringify(value);
 }
 
-const Value = ({ value, status }: { value: unknown; status: string }) => {
+function Value({ value, status }: { value: unknown; status: string }) {
   const formatedValue = formatValue(value);
 
   const { copy } = useCopy({ source: formatedValue });
@@ -116,4 +116,4 @@ const Value = ({ value, status }: { value: unknown; status: string }) => {
       {formatedValue}
     </span>
   );
-};
+}
diff --git a/src/tools/json-diff/diff-viewer/diff-viewer.vue b/src/tools/json-diff/diff-viewer/diff-viewer.vue
index 8d17e6b..08c4784 100644
--- a/src/tools/json-diff/diff-viewer/diff-viewer.vue
+++ b/src/tools/json-diff/diff-viewer/diff-viewer.vue
@@ -1,26 +1,11 @@
-<template>
-  <div v-if="showResults">
-    <div flex justify-center>
-      <n-form-item label="Only show differences" label-placement="left">
-        <n-switch v-model:value="onlyShowDifferences" />
-      </n-form-item>
-    </div>
-
-    <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';
+import { DiffRootViewer } from './diff-viewer.models';
+import { useAppTheme } from '@/ui/theme/themes';
 
-const onlyShowDifferences = ref(false);
 const props = defineProps<{ leftJson: unknown; rightJson: unknown }>();
+const onlyShowDifferences = ref(false);
 const { leftJson, rightJson } = toRefs(props);
 const appTheme = useAppTheme();
 
@@ -32,6 +17,23 @@ const jsonAreTheSame = computed(() => _.isEqual(leftJson.value, rightJson.value)
 const showResults = computed(() => !_.isUndefined(leftJson.value) && !_.isUndefined(rightJson.value));
 </script>
 
+<template>
+  <div v-if="showResults">
+    <div flex justify-center>
+      <n-form-item label="Only show differences" label-placement="left">
+        <n-switch v-model:value="onlyShowDifferences" />
+      </n-form-item>
+    </div>
+
+    <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>
+      <DiffRootViewer v-else :diff="result" />
+    </c-card>
+  </div>
+</template>
+
 <style lang="less" scoped>
 ::v-deep(.diffs-viewer) {
   color: v-bind('appTheme.text.mutedColor');
diff --git a/src/tools/json-diff/json-diff.e2e.spec.ts b/src/tools/json-diff/json-diff.e2e.spec.ts
index 5370060..6bd04f3 100644
--- a/src/tools/json-diff/json-diff.e2e.spec.ts
+++ b/src/tools/json-diff/json-diff.e2e.spec.ts
@@ -1,4 +1,4 @@
-import { test, expect } from '@playwright/test';
+import { expect, test } from '@playwright/test';
 
 test.describe('Tool - JSON diff', () => {
   test.beforeEach(async ({ page }) => {
@@ -24,7 +24,7 @@ test.describe('Tool - JSON diff', () => {
 
     const result = await page.getByTestId('diff-result').innerText();
 
-    expect(result).toContain(`{\nfoo: "bar""buz",\nbaz: "qux",\n},`);
+    expect(result).toContain('{\nfoo: "bar""buz",\nbaz: "qux",\n},');
   });
 
   test('Different JSONs have only differences listed when "Only show differences" is checked', async ({ page }) => {
@@ -34,6 +34,6 @@ test.describe('Tool - JSON diff', () => {
 
     const result = await page.getByTestId('diff-result').innerText();
 
-    expect(result).toContain(`{\nbaz: "qux",\n},`);
+    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
index b8e699f..fc745f3 100644
--- a/src/tools/json-diff/json-diff.models.test.ts
+++ b/src/tools/json-diff/json-diff.models.test.ts
@@ -1,4 +1,4 @@
-import { expect, describe, it } from 'vitest';
+import { describe, expect, it } from 'vitest';
 import { diff } from './json-diff.models';
 
 describe('json-diff models', () => {
diff --git a/src/tools/json-diff/json-diff.models.ts b/src/tools/json-diff/json-diff.models.ts
index ee6ba4b..54bb253 100644
--- a/src/tools/json-diff/json-diff.models.ts
+++ b/src/tools/json-diff/json-diff.models.ts
@@ -46,8 +46,8 @@ function diffObjects(
 ): Difference[] {
   const keys = Object.keys({ ...obj, ...newObj });
   return keys
-    .map((key) => createDifference(obj?.[key], newObj?.[key], key, { onlyShowDifferences }))
-    .filter((diff) => !onlyShowDifferences || diff.status !== 'unchanged');
+    .map(key => createDifference(obj?.[key], newObj?.[key], key, { onlyShowDifferences }))
+    .filter(diff => !onlyShowDifferences || diff.status !== 'unchanged');
 }
 
 function createDifference(
@@ -99,7 +99,7 @@ function diffArrays(
   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');
+  ).filter(diff => !onlyShowDifferences || diff.status !== 'unchanged');
 }
 
 function getType(value: unknown): 'object' | 'array' | 'value' {
diff --git a/src/tools/json-diff/json-diff.types.ts b/src/tools/json-diff/json-diff.types.ts
index 8cf58ad..e778f36 100644
--- a/src/tools/json-diff/json-diff.types.ts
+++ b/src/tools/json-diff/json-diff.types.ts
@@ -1,29 +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 interface 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 interface 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 interface 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
index 811f7fa..2ef3de0 100644
--- a/src/tools/json-diff/json-diff.vue
+++ b/src/tools/json-diff/json-diff.vue
@@ -1,3 +1,24 @@
+<script setup lang="ts">
+import JSON5 from 'json5';
+
+import DiffsViewer from './diff-viewer/diff-viewer.vue';
+import { withDefaultOnError } from '@/utils/defaults';
+import { isNotThrowing } from '@/utils/boolean';
+
+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 jsonValidationRules = [
+  {
+    validator: (value: string) => value === '' || isNotThrowing(() => JSON5.parse(value)),
+    message: 'Invalid JSON format',
+  },
+];
+</script>
+
 <template>
   <c-input-text
     v-model:value="rawLeftJson"
@@ -23,24 +44,3 @@
 
   <DiffsViewer :left-json="leftJson" :right-json="rightJson" />
 </template>
-
-<script setup lang="ts">
-import JSON5 from 'json5';
-
-import { withDefaultOnError } from '@/utils/defaults';
-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 jsonValidationRules = [
-  {
-    validator: (value: string) => value === '' || isNotThrowing(() => JSON5.parse(value)),
-    message: 'Invalid JSON format',
-  },
-];
-</script>