Merge branch 'feat/json-linter' into chore/all-my-stuffs

# Conflicts:
#	components.d.ts
#	package.json
#	pnpm-lock.yaml
#	src/tools/index.ts

Author: sharevb

package.json

@@ -223,6 +223,7 @@
     "jsonar-mod": "^1.9.0",
     "jsstack.js": "^2.0.0",
     "jsvat-next": "^3.0.4",
+    "jsonlint-mod": "^1.7.6",
     "jwt-decode": "^3.1.2",
     "korean-unpacker": "^1.0.3",
     "libphonenumber-js": "^1.10.28",

pnpm-lock.yaml

@@ -119,6 +119,7 @@ import { tool as htmlCleaner } from './html-cleaner';
 import { tool as imageToAsciiArt } from './image-to-ascii-art';
 import { tool as ipv6SubnetCalculator } from './ipv6-subnet-calculator';
 import { tool as jsonEscaper } from './json-escaper';
+import { tool as jsonLinter } from './json-linter';
 import { tool as pdfSignatureChecker } from './pdf-signature-checker';
 import { tool as numeronymGenerator } from './numeronym-generator';
 import { tool as macAddressGenerator } from './mac-address-generator';
@@ -370,6 +371,7 @@ export const toolsByCategory: ToolCategory[] = [
       jsonViewer,
       jsonMinify,
       jsonSizeAnalyzer,
+      jsonLinter,
       jsonToCsv,
       sqlPrettify,
       chmodCalculator,

src/tools/index.ts

@@ -0,0 +1,12 @@
+import { Braces } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'JSON Linter',
+  path: '/json-linter',
+  description: 'Check and lint JSON content',
+  keywords: ['json', 'linter', 'check'],
+  component: () => import('./json-linter.vue'),
+  icon: Braces,
+  createdAt: new Date('2024-03-20'),
+});

src/tools/json-linter/index.ts

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import linter from 'jsonlint-mod';
+
+const jsonContent = ref(
+  `{ 
+    a: True; 
+    b=5 
+  }`,
+);
+
+const conversionError = computed(() => {
+  try {
+    linter.parse(jsonContent.value);
+    return null;
+  }
+  catch (e: any) {
+    return e.toString();
+  }
+});
+
+const MONACO_EDITOR_OPTIONS = {
+  automaticLayout: true,
+  formatOnType: true,
+  formatOnPaste: true,
+};
+</script>
+
+<template>
+  <div>
+    <c-label label="Paste your JSON file content:">
+      <div relative w-full>
+        <c-monaco-editor
+          v-model:value="jsonContent"
+          theme="vs-dark"
+          language="yaml"
+          height="250px"
+          :options="MONACO_EDITOR_OPTIONS"
+        />
+      </div>
+    </c-label>
+
+    <div v-if="conversionError">
+      <n-alert title="The following errors occured" type="error" mt-5>
+        <pre>
+        {{ conversionError }}
+        </pre>
+      </n-alert>
+    </div>
+    <div v-else>
+      <n-alert type="success" mt-5>
+        Validation successful!
+      </n-alert>
+    </div>
+  </div>
+</template>

src/tools/json-linter/json-linter.vue

@@ -0,0 +1,11 @@
+declare module 'jsonlint-mod'{
+/**
+ * Parse a JSON string to Typescript Object. If there is an error will print it
+ * as human readible.
+ *
+ * Please use `import * as jsonlint from 'jsonlint';`. Instead of,
+ * `import {parse} from 'jsonlint';`. Otherwise, it cannot reference to the
+ * correct instance.
+ */
+export function parse(str: string): Record<string, unknown>;
+}