aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--package.json3
-rw-r--r--pnpm-lock.yaml8
-rw-r--r--src/tools/index.ts4
-rw-r--r--src/tools/json-to-yaml-converter/index.ts12
-rw-r--r--src/tools/json-to-yaml-converter/json-to-yaml.e2e.spec.ts19
-rw-r--r--src/tools/json-to-yaml-converter/json-to-yaml.vue29
-rw-r--r--src/tools/yaml-to-json-converter/index.ts12
-rw-r--r--src/tools/yaml-to-json-converter/yaml-to-json.e2e.spec.ts31
-rw-r--r--src/tools/yaml-to-json-converter/yaml-to-json.vue32
9 files changed, 149 insertions, 1 deletions
diff --git a/package.json b/package.json
index e174aa3..f53ab48 100644
--- a/package.json
+++ b/package.json
@@ -73,7 +73,8 @@
"ua-parser-js": "^1.0.35",
"uuid": "^8.3.2",
"vue": "^3.2.47",
- "vue-router": "^4.1.6"
+ "vue-router": "^4.1.6",
+ "yaml": "^2.2.1"
},
"devDependencies": {
"@playwright/test": "^1.32.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index bbd815d..d98509a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -124,6 +124,9 @@ dependencies:
vue-router:
specifier: ^4.1.6
version: 4.1.6(vue@3.2.47)
+ yaml:
+ specifier: ^2.2.1
+ version: 2.2.1
devDependencies:
'@playwright/test':
@@ -9029,6 +9032,11 @@ packages:
resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
dev: true
+ /yaml@2.2.1:
+ resolution: {integrity: sha512-e0WHiYql7+9wr4cWMx3TVQrNwejKaEe7/rHNmQmqRjazfOP5W8PB6Jpebb5o6fIapbz9o9+2ipcaTM2ZwDI6lw==}
+ engines: {node: '>= 14'}
+ dev: false
+
/yamljs@0.3.0:
resolution: {integrity: sha512-C/FsVVhht4iPQYXOInoxUM/1ELSf9EsgKH34FofQOp6hwCPrW4vG4w5++TED3xRUo8gD7l0P1J1dLlDYzODsTQ==}
hasBin: true
diff --git a/src/tools/index.ts b/src/tools/index.ts
index c68c20a..5cb0cdc 100644
--- a/src/tools/index.ts
+++ b/src/tools/index.ts
@@ -1,6 +1,8 @@
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 yamlToJson } from './yaml-to-json-converter';
+import { tool as jsonToYaml } from './json-to-yaml-converter';
import { tool as ipv6UlaGenerator } from './ipv6-ula-generator';
import { tool as ipv4AddressConverter } from './ipv4-address-converter';
import { tool as benchmarkBuilder } from './benchmark-builder';
@@ -66,6 +68,8 @@ export const toolsByCategory: ToolCategory[] = [
colorConverter,
caseConverter,
textToNatoAlphabet,
+ yamlToJson,
+ jsonToYaml,
],
},
{
diff --git a/src/tools/json-to-yaml-converter/index.ts b/src/tools/json-to-yaml-converter/index.ts
new file mode 100644
index 0000000..9db09d3
--- /dev/null
+++ b/src/tools/json-to-yaml-converter/index.ts
@@ -0,0 +1,12 @@
+import { Braces } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+ name: 'JSON to YAML converter',
+ path: '/json-to-yaml-converter',
+ description: 'Simply convert JSON to YAML with this live online converter.',
+ keywords: ['yaml', 'to', 'json'],
+ component: () => import('./json-to-yaml.vue'),
+ icon: Braces,
+ createdAt: new Date('2023-04-10'),
+});
diff --git a/src/tools/json-to-yaml-converter/json-to-yaml.e2e.spec.ts b/src/tools/json-to-yaml-converter/json-to-yaml.e2e.spec.ts
new file mode 100644
index 0000000..bce095b
--- /dev/null
+++ b/src/tools/json-to-yaml-converter/json-to-yaml.e2e.spec.ts
@@ -0,0 +1,19 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Tool - json to yaml', () => {
+ test.beforeEach(async ({ page }) => {
+ await page.goto('/json-to-yaml-converter');
+ });
+
+ test('Has correct title', async ({ page }) => {
+ await expect(page).toHaveTitle('JSON to YAML converter - IT Tools');
+ });
+
+ test('json is parsed and output clean yaml', async ({ page }) => {
+ await page.getByTestId('input').fill('{"foo":"bar","list":["item",{"key":"value"}]}');
+
+ const generatedJson = await page.getByTestId('area-content').innerText();
+
+ expect(generatedJson.trim()).toEqual(`foo: bar\nlist:\n - item\n - key: value`.trim());
+ });
+});
diff --git a/src/tools/json-to-yaml-converter/json-to-yaml.vue b/src/tools/json-to-yaml-converter/json-to-yaml.vue
new file mode 100644
index 0000000..f25ef37
--- /dev/null
+++ b/src/tools/json-to-yaml-converter/json-to-yaml.vue
@@ -0,0 +1,29 @@
+<template>
+ <format-transformer
+ input-label="Your JSON"
+ input-placeholder="Paste your JSON here..."
+ output-label="YAML from your JSON"
+ output-language="yaml"
+ :input-validation-rules="rules"
+ :transformer="transformer"
+ />
+</template>
+
+<script setup lang="ts">
+import type { UseValidationRule } from '@/composable/validation';
+import { isNotThrowing } from '@/utils/boolean';
+import { withDefaultOnError } from '@/utils/defaults';
+import { stringify } from 'yaml';
+import JSON5 from 'json5';
+
+const transformer = (value: string) => withDefaultOnError(() => stringify(JSON5.parse(value)), '');
+
+const rules: UseValidationRule<string>[] = [
+ {
+ validator: (value: string) => value === '' || isNotThrowing(() => stringify(JSON5.parse(value))),
+ message: 'Provided JSON is not valid.',
+ },
+];
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/tools/yaml-to-json-converter/index.ts b/src/tools/yaml-to-json-converter/index.ts
new file mode 100644
index 0000000..724ecdb
--- /dev/null
+++ b/src/tools/yaml-to-json-converter/index.ts
@@ -0,0 +1,12 @@
+import { AlignJustified } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+ name: 'YAML to JSON converter',
+ path: '/yaml-to-json-converter',
+ description: 'Simply convert YAML to JSON with this live online converter.',
+ keywords: ['yaml', 'to', 'json'],
+ component: () => import('./yaml-to-json.vue'),
+ icon: AlignJustified,
+ createdAt: new Date('2023-04-10'),
+});
diff --git a/src/tools/yaml-to-json-converter/yaml-to-json.e2e.spec.ts b/src/tools/yaml-to-json-converter/yaml-to-json.e2e.spec.ts
new file mode 100644
index 0000000..10db449
--- /dev/null
+++ b/src/tools/yaml-to-json-converter/yaml-to-json.e2e.spec.ts
@@ -0,0 +1,31 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Tool - Yaml to json', () => {
+ test.beforeEach(async ({ page }) => {
+ await page.goto('/yaml-to-json-converter');
+ });
+
+ test('Has correct title', async ({ page }) => {
+ await expect(page).toHaveTitle('YAML to JSON converter - IT Tools');
+ });
+
+ test('Yaml is parsed and output clean json', async ({ page }) => {
+ await page.getByTestId('input').fill('foo: bar\nlist:\n - item\n - key: value');
+
+ const generatedJson = await page.getByTestId('area-content').innerText();
+
+ expect(generatedJson.trim()).toEqual(
+ `
+{
+ "foo": "bar",
+ "list": [
+ "item",
+ {
+ "key": "value"
+ }
+ ]
+}
+ `.trim(),
+ );
+ });
+});
diff --git a/src/tools/yaml-to-json-converter/yaml-to-json.vue b/src/tools/yaml-to-json-converter/yaml-to-json.vue
new file mode 100644
index 0000000..c066bdd
--- /dev/null
+++ b/src/tools/yaml-to-json-converter/yaml-to-json.vue
@@ -0,0 +1,32 @@
+<template>
+ <format-transformer
+ input-label="Your YAML"
+ input-placeholder="Paste your yaml here..."
+ output-label="JSON from your YAML"
+ output-language="json"
+ :input-validation-rules="rules"
+ :transformer="transformer"
+ />
+</template>
+
+<script setup lang="ts">
+import type { UseValidationRule } from '@/composable/validation';
+import { isNotThrowing } from '@/utils/boolean';
+import { withDefaultOnError } from '@/utils/defaults';
+import { parse as parseYaml } from 'yaml';
+
+const transformer = (value: string) =>
+ withDefaultOnError(() => {
+ const obj = parseYaml(value);
+ return obj ? JSON.stringify(obj, null, 3) : '';
+ }, '');
+
+const rules: UseValidationRule<string>[] = [
+ {
+ validator: (value: string) => isNotThrowing(() => parseYaml(value)),
+ message: 'Provided YAML is not valid.',
+ },
+];
+</script>
+
+<style lang="less" scoped></style>
generated by cgit v1.2.3 (git 2.39.1) at 2025-08-04 07:18:15 +0000