Merge branch 'up/fix/json-to-object' into chore/all-my-stuffs

Author: sharevb

locales/en.yml

@@ -411,4 +411,7 @@ tools:
 
   text-to-binary:
     title: Text to ASCII binary
-    description: Convert text to its ASCII binary representation and vice-versa.
+    description: Convert text to its ASCII binary representation and vice-versa.
+  json-to-object:
+    title: JSON to object
+    description: Parse and convert JSON to object.

package.json

@@ -213,6 +213,7 @@
     "slashes": "^3.0.12",
     "spdx-satisfies": "^5.0.1",
     "sql-formatter": "^13.0.0",
+    "stringify-object": "^5.0.0",
     "sshpk": "^1.18.0",
     "svg2png-wasm": "^1.4.1",
     "svgo": "^3.3.2",
@@ -280,6 +281,7 @@
     "@types/potrace": "^2.1.5",
     "@types/punycode": "^2.1.4",
     "@types/qrcode": "^1.5.0",
+    "@types/stringify-object": "^4.0.5",
     "@types/spdx-satisfies": "^0.1.2",
     "@types/sshpk": "^1.17.4",
     "@types/turndown": "^5.0.5",

pnpm-lock.yaml

@@ -233,6 +233,7 @@ import { tool as pdfUnlock } from './pdf-unlock';
 import { tool as ipCidrToRange } from './ip-cidr-to-range';
 import { tool as ipRangeToCidr } from './ip-range-to-cidr';
 import { tool as ipv6AddressConverter } from './ipv6-address-converter';
+import { tool as jsonToObject } from './json-to-object';
 
 export const toolsByCategory: ToolCategory[] = [
   {
@@ -385,6 +386,7 @@ export const toolsByCategory: ToolCategory[] = [
       jsonLinter,
       jsonToCsv,
       csvToJson,
+      jsonToObject,
       sqlPrettify,
       chmodCalculator,
       dockerRunToDockerComposeConverter,

src/tools/index.ts

@@ -0,0 +1,13 @@
+import { Braces } from '@vicons/tabler';
+import { defineTool } from '../tool';
+import { translate } from '@/plugins/i18n.plugin';
+
+export const tool = defineTool({
+  name: translate('tools.json-to-object.title'),
+  path: '/json-to-object',
+  description: translate('tools.json-to-object.description'),
+  keywords: ['json', 'parse', 'object', 'convert', 'transform'],
+  component: () => import('./json-to-object.vue'),
+  icon: Braces,
+  createdAt: new Date('2024-08-16'),
+});

src/tools/json-to-object/index.ts

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import JSON5 from 'json5';
+import stringifyObject from 'stringify-object';
+import type { UseValidationRule } from '@/composable/validation';
+import { isNotThrowing } from '@/utils/boolean';
+import { withDefaultOnError } from '@/utils/defaults';
+
+function transformer(value: string) {
+  return withDefaultOnError(() => stringifyObject(JSON5.parse(value), {
+    indent: '  ',
+    singleQuotes: false,
+  }), '');
+}
+
+const rules: UseValidationRule<string>[] = [
+  {
+    validator: (value: string) => value === '' || isNotThrowing(() => stringifyObject(JSON5.parse(value))),
+    message: 'Provided JSON is not valid.',
+  },
+];
+</script>
+
+<template>
+  <format-transformer
+    input-label="Your JSON"
+    input-placeholder="Paste your JSON here..."
+    output-label="Object from your JSON"
+    output-language="js"
+    :input-validation-rules="rules"
+    :transformer="transformer"
+  />
+</template>