feat(new-tool): json to toml

src/components/TextareaCopyable.vue

@@ -6,6 +6,7 @@ import jsonHljs from 'highlight.js/lib/languages/json';
 import sqlHljs from 'highlight.js/lib/languages/sql';
 import xmlHljs from 'highlight.js/lib/languages/xml';
 import yamlHljs from 'highlight.js/lib/languages/yaml';
+import iniHljs from 'highlight.js/lib/languages/ini';
 
 const props = withDefaults(
   defineProps<{
@@ -27,6 +28,7 @@ hljs.registerLanguage('json', jsonHljs);
 hljs.registerLanguage('html', xmlHljs);
 hljs.registerLanguage('xml', xmlHljs);
 hljs.registerLanguage('yaml', yamlHljs);
+hljs.registerLanguage('toml', iniHljs);
 
 const { value, language, followHeightOf, copyPlacement, copyMessage } = toRefs(props);
 const { height } = followHeightOf.value ? useElementSize(followHeightOf) : { height: ref(null) };

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 jsonToToml } from './json-to-toml';
 import { tool as tomlToYaml } from './toml-to-yaml';
 import { tool as tomlToJson } from './toml-to-json';
 import { tool as jsonToCsv } from './json-to-csv';
@@ -81,6 +82,7 @@ export const toolsByCategory: ToolCategory[] = [
       textToNatoAlphabet,
       yamlToJson,
       jsonToYaml,
+      jsonToToml,
       listConverter,
       tomlToJson,
       tomlToYaml,

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

@@ -0,0 +1,12 @@
+import { Braces } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'JSON to TOML',
+  path: '/json-to-toml',
+  description: 'Parse and convert JSON to TOML.',
+  keywords: ['json', 'parse', 'toml', 'convert', 'transform'],
+  component: () => import('./json-to-toml.vue'),
+  icon: Braces,
+  createdAt: new Date('2023-06-23'),
+});

src/tools/json-to-toml/json-to-toml.e2e.spec.ts

@@ -0,0 +1,39 @@
+import { expect, test } from '@playwright/test';
+
+test.describe('Tool - JSON to TOML', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/json-to-toml');
+  });
+
+  test('Has correct title', async ({ page }) => {
+    await expect(page).toHaveTitle('JSON to TOML - IT Tools');
+  });
+
+  test('JSON is parsed and outputs clean TOML', async ({ page }) => {
+    await page.getByTestId('input').fill(`
+{
+   "foo": "bar",
+   "list": {
+      "name": "item",
+      "another": {
+         "key": "value"
+      }
+   }
+}
+    `.trim());
+
+    const generatedJson = await page.getByTestId('area-content').innerText();
+
+    expect(generatedJson.trim()).toEqual(
+      `
+foo = "bar"
+
+[list]
+name = "item"
+
+  [list.another]
+  key = "value"
+   `.trim(),
+    );
+  });
+});

src/tools/json-to-toml/json-to-toml.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { stringify as stringifyToml } from 'iarna-toml-esm';
+import JSON5 from 'json5';
+import { withDefaultOnError } from '../../utils/defaults';
+import type { UseValidationRule } from '@/composable/validation';
+
+const convertJsonToToml = (value: string) => [stringifyToml(JSON5.parse(value))].flat().join('\n').trim();
+
+const transformer = (value: string) => value.trim() === '' ? '' : withDefaultOnError(() => convertJsonToToml(value), '');
+
+const rules: UseValidationRule<string>[] = [
+  {
+    validator: (v: string) => v === '' || JSON5.parse(v),
+    message: 'Provided JSON is not valid.',
+  },
+];
+</script>
+
+<template>
+  <format-transformer
+    input-label="Your JSON"
+    input-placeholder="Paste your JSON here..."
+    output-label="TOML from your JSON"
+    output-language="toml"
+    :input-validation-rules="rules"
+    :transformer="transformer"
+  />
+</template>