feat: Implement JS Object to JSON Converter (CorentinTh#849)

Author: utf26

components.d.ts

@@ -89,26 +89,39 @@ declare module '@vue/runtime-core' {
     HttpStatusCodes: typeof import('./src/tools/http-status-codes/http-status-codes.vue')['default']
     IbanValidatorAndParser: typeof import('./src/tools/iban-validator-and-parser/iban-validator-and-parser.vue')['default']
     'IconMdi:brushVariant': typeof import('~icons/mdi/brush-variant')['default']
+    'IconMdi:contentCopy': typeof import('~icons/mdi/content-copy')['default']
     'IconMdi:kettleSteamOutline': typeof import('~icons/mdi/kettle-steam-outline')['default']
+    IconMdiArrowDown: typeof import('~icons/mdi/arrow-down')['default']
+    IconMdiArrowRightBottom: typeof import('~icons/mdi/arrow-right-bottom')['default']
+    IconMdiCamera: typeof import('~icons/mdi/camera')['default']
     IconMdiChevronDown: typeof import('~icons/mdi/chevron-down')['default']
     IconMdiChevronRight: typeof import('~icons/mdi/chevron-right')['default']
     IconMdiClose: typeof import('~icons/mdi/close')['default']
     IconMdiContentCopy: typeof import('~icons/mdi/content-copy')['default']
+    IconMdiDeleteOutline: typeof import('~icons/mdi/delete-outline')['default']
+    IconMdiDownload: typeof import('~icons/mdi/download')['default']
     IconMdiEye: typeof import('~icons/mdi/eye')['default']
     IconMdiEyeOff: typeof import('~icons/mdi/eye-off')['default']
     IconMdiHeart: typeof import('~icons/mdi/heart')['default']
+    IconMdiPause: typeof import('~icons/mdi/pause')['default']
+    IconMdiPlay: typeof import('~icons/mdi/play')['default']
+    IconMdiRecord: typeof import('~icons/mdi/record')['default']
+    IconMdiRefresh: typeof import('~icons/mdi/refresh')['default']
     IconMdiSearch: typeof import('~icons/mdi/search')['default']
     IconMdiTranslate: typeof import('~icons/mdi/translate')['default']
     IconMdiTriangleDown: typeof import('~icons/mdi/triangle-down')['default']
+    IconMdiVideo: typeof import('~icons/mdi/video')['default']
     InputCopyable: typeof import('./src/components/InputCopyable.vue')['default']
     IntegerBaseConverter: typeof import('./src/tools/integer-base-converter/integer-base-converter.vue')['default']
     Ipv4AddressConverter: typeof import('./src/tools/ipv4-address-converter/ipv4-address-converter.vue')['default']
     Ipv4RangeExpander: typeof import('./src/tools/ipv4-range-expander/ipv4-range-expander.vue')['default']
     Ipv4SubnetCalculator: typeof import('./src/tools/ipv4-subnet-calculator/ipv4-subnet-calculator.vue')['default']
     Ipv6UlaGenerator: typeof import('./src/tools/ipv6-ula-generator/ipv6-ula-generator.vue')['default']
+    JavascriptToJson: typeof import('./src/tools/javascript-to-json/javascript-to-json.vue')['default']
     JsonDiff: typeof import('./src/tools/json-diff/json-diff.vue')['default']
     JsonMinify: typeof import('./src/tools/json-minify/json-minify.vue')['default']
     JsonToCsv: typeof import('./src/tools/json-to-csv/json-to-csv.vue')['default']
+    JsonToJavascript: typeof import('./src/tools/json-to-javascript/json-to-javascript.vue')['default']
     JsonToToml: typeof import('./src/tools/json-to-toml/json-to-toml.vue')['default']
     JsonToYaml: typeof import('./src/tools/json-to-yaml-converter/json-to-yaml.vue')['default']
     JsonViewer: typeof import('./src/tools/json-viewer/json-viewer.vue')['default']
@@ -126,25 +139,40 @@ declare module '@vue/runtime-core' {
     MenuLayout: typeof import('./src/components/MenuLayout.vue')['default']
     MetaTagGenerator: typeof import('./src/tools/meta-tag-generator/meta-tag-generator.vue')['default']
     MimeTypes: typeof import('./src/tools/mime-types/mime-types.vue')['default']
+    NAlert: typeof import('naive-ui')['NAlert']
     NavbarButtons: typeof import('./src/components/NavbarButtons.vue')['default']
+    NCheckbox: typeof import('naive-ui')['NCheckbox']
     NCode: typeof import('naive-ui')['NCode']
     NCollapseTransition: typeof import('naive-ui')['NCollapseTransition']
+    NColorPicker: typeof import('naive-ui')['NColorPicker']
     NConfigProvider: typeof import('naive-ui')['NConfigProvider']
+    NDatePicker: typeof import('naive-ui')['NDatePicker']
     NDivider: typeof import('naive-ui')['NDivider']
+    NDynamicInput: typeof import('naive-ui')['NDynamicInput']
     NEllipsis: typeof import('naive-ui')['NEllipsis']
+    NForm: typeof import('naive-ui')['NForm']
     NFormItem: typeof import('naive-ui')['NFormItem']
     NGi: typeof import('naive-ui')['NGi']
     NGrid: typeof import('naive-ui')['NGrid']
     NH1: typeof import('naive-ui')['NH1']
+    NH2: typeof import('naive-ui')['NH2']
     NH3: typeof import('naive-ui')['NH3']
     NIcon: typeof import('naive-ui')['NIcon']
+    NImage: typeof import('naive-ui')['NImage']
+    NInputGroup: typeof import('naive-ui')['NInputGroup']
+    NInputGroupLabel: typeof import('naive-ui')['NInputGroupLabel']
     NInputNumber: typeof import('naive-ui')['NInputNumber']
-    NLabel: typeof import('naive-ui')['NLabel']
     NLayout: typeof import('naive-ui')['NLayout']
     NLayoutSider: typeof import('naive-ui')['NLayoutSider']
     NMenu: typeof import('naive-ui')['NMenu']
+    NProgress: typeof import('naive-ui')['NProgress']
     NScrollbar: typeof import('naive-ui')['NScrollbar']
+    NSlider: typeof import('naive-ui')['NSlider']
     NSpin: typeof import('naive-ui')['NSpin']
+    NStatistic: typeof import('naive-ui')['NStatistic']
+    NSwitch: typeof import('naive-ui')['NSwitch']
+    NTable: typeof import('naive-ui')['NTable']
+    NTag: typeof import('naive-ui')['NTag']
     NumeronymGenerator: typeof import('./src/tools/numeronym-generator/numeronym-generator.vue')['default']
     OtpCodeGeneratorAndValidator: typeof import('./src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue')['default']
     PasswordStrengthAnalyser: typeof import('./src/tools/password-strength-analyser/password-strength-analyser.vue')['default']
@@ -159,6 +187,7 @@ declare module '@vue/runtime-core' {
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     RsaKeyPairGenerator: typeof import('./src/tools/rsa-key-pair-generator/rsa-key-pair-generator.vue')['default']
+    SafelinkDecoder: typeof import('./src/tools/safelink-decoder/safelink-decoder.vue')['default']
     SlugifyString: typeof import('./src/tools/slugify-string/slugify-string.vue')['default']
     SpanCopyable: typeof import('./src/components/SpanCopyable.vue')['default']
     SqlPrettify: typeof import('./src/tools/sql-prettify/sql-prettify.vue')['default']

locales/en.yml

@@ -199,6 +199,14 @@ tools:
   json-to-yaml-converter:
     title: JSON to YAML converter
     description: Simply convert JSON to YAML with this live online converter.
+  
+  json-to-javascript:
+    title: JSON to JS converter
+    description: Simply convert JSON to Javascript object with this live online converter.
+
+  javascript-to-json:
+    title: JS to JSON converter
+    description: Simply convert Javascript object to JSON with this live online converter.
 
   url-parser:
     title: Url parser

locales/zh.yml

@@ -197,6 +197,14 @@ tools:
     title: JSON到YAML转换器
     description: 在线转换将JSON转换为YAML。
 
+  json-to-javascript:
+    title: JSON 到 JS 转换器
+    description: 使用此在线转换器将 JSON 转换为 Javascript 对象。
+
+  javascript-to-json:
+    title: JS 到 JSON 转换器
+    description: 使用此在线转换器将 Javascript 对象转换为 JSON。
+
   url-parser:
     title: Url分析器
     description: 解析url字符串以获取所有不同的部分（协议、来源、参数、端口、用户名密码…）

src/components/TextareaCopyable.vue

@@ -2,6 +2,7 @@
 import { Copy } from '@vicons/tabler';
 import { useElementSize } from '@vueuse/core';
 import hljs from 'highlight.js/lib/core';
+import javascriptHljs from 'highlight.js/lib/languages/javascript';
 import jsonHljs from 'highlight.js/lib/languages/json';
 import sqlHljs from 'highlight.js/lib/languages/sql';
 import xmlHljs from 'highlight.js/lib/languages/xml';
@@ -24,6 +25,7 @@ const props = withDefaults(
     copyMessage: 'Copy to clipboard',
   },
 );
+hljs.registerLanguage('javascript', javascriptHljs);
 hljs.registerLanguage('sql', sqlHljs);
 hljs.registerLanguage('json', jsonHljs);
 hljs.registerLanguage('html', xmlHljs);

src/tools/index.ts

@@ -28,6 +28,8 @@ import { tool as jsonDiff } from './json-diff';
 import { tool as ipv4RangeExpander } from './ipv4-range-expander';
 import { tool as httpStatusCodes } from './http-status-codes';
 import { tool as yamlToJson } from './yaml-to-json-converter';
+import { tool as javascriptToJson } from './javascript-to-json';
+import { tool as jsonToJavascript } from './json-to-javascript';
 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';
@@ -102,6 +104,8 @@ export const toolsByCategory: ToolCategory[] = [
       textToUnicode,
       yamlToJson,
       yamlToToml,
+      javascriptToJson,
+      jsonToJavascript,
       jsonToYaml,
       jsonToToml,
       listConverter,

src/tools/javascript-to-json/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.javascript-to-json.title'),
+  path: '/javascript-to-json',
+  description: translate('tools.javascript-to-json.description'),
+  keywords: ['javascript', 'to', 'json'],
+  component: () => import('./javascript-to-json.vue'),
+  icon: Braces,
+  createdAt: new Date('2024-03-29'),
+});

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

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import JSON5 from 'json5';
+import type { UseValidationRule } from '@/composable/validation';
+import { isNotThrowing } from '@/utils/boolean';
+import { withDefaultOnError } from '@/utils/defaults';
+
+const indentSize = useStorage('json-prettify:indent-size', 3);
+const transformer = (value: string) => withDefaultOnError(() => JSON.stringify(JSON5.parse(value), null, indentSize.value), '');
+
+const rules: UseValidationRule<string>[] = [
+  {
+    validator: (value: string) => value === '' || isNotThrowing(() => JSON.stringify(JSON5.parse(value))),
+    message: 'Provided JS Object is not valid.',
+  },
+];
+</script>
+
+<template>
+  <div style="flex: 0 0 100%">
+    <div style="margin: 0 auto; max-width: 600px" flex justify-center gap-3>
+      <n-form-item label="Indent size :" label-placement="left" label-width="100" :show-feedback="false">
+        <n-input-number v-model:value="indentSize" min="0" max="10" style="width: 100px" />
+      </n-form-item>
+    </div>
+  </div>
+
+  <format-transformer
+    input-label="Your JavaScript Object"
+    input-placeholder="Paste your JS Object here..."
+    output-label="JSON from your JavaScript Object"
+    output-language="json"
+    :input-validation-rules="rules"
+    :transformer="transformer"
+  />
+</template>

src/tools/json-to-javascript/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-javascript.title'),
+  path: '/json-to-javascript',
+  description: translate('tools.json-to-javascript.description'),
+  keywords: ['json', 'to', 'javascript'],
+  component: () => import('./json-to-javascript.vue'),
+  icon: Braces,
+  createdAt: new Date('2024-03-29'),
+});

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

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import JSON5 from 'json5';
+import type { UseValidationRule } from '@/composable/validation';
+import { isNotThrowing } from '@/utils/boolean';
+import { withDefaultOnError } from '@/utils/defaults';
+
+const indentSize = useStorage('json-prettify:indent-size', 3);
+const transformer = (value: string) => withDefaultOnError(() => JSON5.stringify(JSON.parse(value), null, indentSize.value), '');
+
+const rules: UseValidationRule<string>[] = [
+  {
+    validator: (value: string) => value === '' || isNotThrowing(() => JSON5.stringify(JSON.parse(value))),
+    message: 'Provided JSON is not valid.',
+  },
+];
+</script>
+
+<template>
+  <div style="flex: 0 0 100%">
+    <div style="margin: 0 auto; max-width: 600px" flex justify-center gap-3>
+      <n-form-item label="Indent size :" label-placement="left" label-width="100" :show-feedback="false">
+        <n-input-number v-model:value="indentSize" min="0" max="10" style="width: 100px" />
+      </n-form-item>
+    </div>
+  </div>
+
+  <format-transformer
+    input-label="Your JSON"
+    input-placeholder="Paste your JSON here..."
+    output-label="JavaScript Object from your JSON"
+    output-language="javascript"
+    :input-validation-rules="rules"
+    :transformer="transformer"
+  />
+</template>