mirror of
https://github.com/CorentinTh/it-tools.git
synced 2024-09-11 13:37:53 +03:00
Merge df1169dee0
into e876d03608
This commit is contained in:
commit
3efaa9752b
6
components.d.ts
vendored
6
components.d.ts
vendored
@ -110,6 +110,7 @@ declare module '@vue/runtime-core' {
|
|||||||
JsonMinify: typeof import('./src/tools/json-minify/json-minify.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']
|
JsonToCsv: typeof import('./src/tools/json-to-csv/json-to-csv.vue')['default']
|
||||||
JsonToToml: typeof import('./src/tools/json-to-toml/json-to-toml.vue')['default']
|
JsonToToml: typeof import('./src/tools/json-to-toml/json-to-toml.vue')['default']
|
||||||
|
JsonToTs: typeof import('./src/tools/json-to-ts/json-to-ts.vue')['default']
|
||||||
JsonToYaml: typeof import('./src/tools/json-to-yaml-converter/json-to-yaml.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']
|
JsonViewer: typeof import('./src/tools/json-viewer/json-viewer.vue')['default']
|
||||||
JwtParser: typeof import('./src/tools/jwt-parser/jwt-parser.vue')['default']
|
JwtParser: typeof import('./src/tools/jwt-parser/jwt-parser.vue')['default']
|
||||||
@ -130,21 +131,16 @@ declare module '@vue/runtime-core' {
|
|||||||
NCode: typeof import('naive-ui')['NCode']
|
NCode: typeof import('naive-ui')['NCode']
|
||||||
NCollapseTransition: typeof import('naive-ui')['NCollapseTransition']
|
NCollapseTransition: typeof import('naive-ui')['NCollapseTransition']
|
||||||
NConfigProvider: typeof import('naive-ui')['NConfigProvider']
|
NConfigProvider: typeof import('naive-ui')['NConfigProvider']
|
||||||
NDivider: typeof import('naive-ui')['NDivider']
|
|
||||||
NEllipsis: typeof import('naive-ui')['NEllipsis']
|
NEllipsis: typeof import('naive-ui')['NEllipsis']
|
||||||
NFormItem: typeof import('naive-ui')['NFormItem']
|
NFormItem: typeof import('naive-ui')['NFormItem']
|
||||||
NGi: typeof import('naive-ui')['NGi']
|
|
||||||
NGrid: typeof import('naive-ui')['NGrid']
|
|
||||||
NH1: typeof import('naive-ui')['NH1']
|
NH1: typeof import('naive-ui')['NH1']
|
||||||
NH3: typeof import('naive-ui')['NH3']
|
NH3: typeof import('naive-ui')['NH3']
|
||||||
NIcon: typeof import('naive-ui')['NIcon']
|
NIcon: typeof import('naive-ui')['NIcon']
|
||||||
NInputNumber: typeof import('naive-ui')['NInputNumber']
|
NInputNumber: typeof import('naive-ui')['NInputNumber']
|
||||||
NLabel: typeof import('naive-ui')['NLabel']
|
|
||||||
NLayout: typeof import('naive-ui')['NLayout']
|
NLayout: typeof import('naive-ui')['NLayout']
|
||||||
NLayoutSider: typeof import('naive-ui')['NLayoutSider']
|
NLayoutSider: typeof import('naive-ui')['NLayoutSider']
|
||||||
NMenu: typeof import('naive-ui')['NMenu']
|
NMenu: typeof import('naive-ui')['NMenu']
|
||||||
NScrollbar: typeof import('naive-ui')['NScrollbar']
|
NScrollbar: typeof import('naive-ui')['NScrollbar']
|
||||||
NSpin: typeof import('naive-ui')['NSpin']
|
|
||||||
NumeronymGenerator: typeof import('./src/tools/numeronym-generator/numeronym-generator.vue')['default']
|
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']
|
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']
|
PasswordStrengthAnalyser: typeof import('./src/tools/password-strength-analyser/password-strength-analyser.vue')['default']
|
||||||
|
@ -320,6 +320,10 @@ tools:
|
|||||||
title: JSON to TOML
|
title: JSON to TOML
|
||||||
description: Parse and convert JSON to TOML.
|
description: Parse and convert JSON to TOML.
|
||||||
|
|
||||||
|
json-to-ts:
|
||||||
|
title: JSON to TS
|
||||||
|
description: Parse and convert JSON to TS.
|
||||||
|
|
||||||
device-information:
|
device-information:
|
||||||
title: Device information
|
title: Device information
|
||||||
description: Get information about your current device (screen size, pixel-ratio, user agent, ...)
|
description: Get information about your current device (screen size, pixel-ratio, user agent, ...)
|
||||||
|
@ -307,9 +307,14 @@ tools:
|
|||||||
hash-text:
|
hash-text:
|
||||||
title: Mã hóa văn bản
|
title: Mã hóa văn bản
|
||||||
description: 'Mã hóa một chuỗi văn bản bằng cách sử dụng các hàm bạn cần: MD5, SHA1, SHA256, SHA224, SHA512, SHA384, SHA3 hoặc RIPEMD160'
|
description: 'Mã hóa một chuỗi văn bản bằng cách sử dụng các hàm bạn cần: MD5, SHA1, SHA256, SHA224, SHA512, SHA384, SHA3 hoặc RIPEMD160'
|
||||||
|
|
||||||
json-to-toml:
|
json-to-toml:
|
||||||
title: Chuyển đổi JSON sang TOML
|
title: Chuyển đổi JSON sang TOML
|
||||||
description: Phân tích và chuyển đổi JSON sang TOML.
|
description: Phân tích và chuyển đổi JSON sang TOML.
|
||||||
|
|
||||||
|
json-to-ts:
|
||||||
|
title: Chuyển đổi JSON sang TS
|
||||||
|
description: Phân tích và chuyển đổi JSON sang TS.
|
||||||
|
|
||||||
device-information:
|
device-information:
|
||||||
title: Thông tin thiết bị
|
title: Thông tin thiết bị
|
||||||
|
@ -316,6 +316,10 @@ tools:
|
|||||||
title: JSON 转 TOML
|
title: JSON 转 TOML
|
||||||
description: 解析JSON并将其转换为TOML。
|
description: 解析JSON并将其转换为TOML。
|
||||||
|
|
||||||
|
json-to-ts:
|
||||||
|
title: JSON 转 TS
|
||||||
|
description: 解析JSON并将其转换为TS。
|
||||||
|
|
||||||
device-information:
|
device-information:
|
||||||
title: 设备信息
|
title: 设备信息
|
||||||
description: 获取有关当前设备的信息(屏幕大小、像素比率、用户代理…)
|
description: 获取有关当前设备的信息(屏幕大小、像素比率、用户代理…)
|
||||||
|
@ -64,6 +64,7 @@
|
|||||||
"highlight.js": "^11.7.0",
|
"highlight.js": "^11.7.0",
|
||||||
"iarna-toml-esm": "^3.0.5",
|
"iarna-toml-esm": "^3.0.5",
|
||||||
"ibantools": "^4.3.3",
|
"ibantools": "^4.3.3",
|
||||||
|
"json-to-ts": "^1.7.0",
|
||||||
"json5": "^2.2.3",
|
"json5": "^2.2.3",
|
||||||
"jwt-decode": "^3.1.2",
|
"jwt-decode": "^3.1.2",
|
||||||
"libphonenumber-js": "^1.10.28",
|
"libphonenumber-js": "^1.10.28",
|
||||||
|
12159
pnpm-lock.yaml
12159
pnpm-lock.yaml
File diff suppressed because it is too large
Load Diff
@ -7,6 +7,7 @@ import sqlHljs from 'highlight.js/lib/languages/sql';
|
|||||||
import xmlHljs from 'highlight.js/lib/languages/xml';
|
import xmlHljs from 'highlight.js/lib/languages/xml';
|
||||||
import yamlHljs from 'highlight.js/lib/languages/yaml';
|
import yamlHljs from 'highlight.js/lib/languages/yaml';
|
||||||
import iniHljs from 'highlight.js/lib/languages/ini';
|
import iniHljs from 'highlight.js/lib/languages/ini';
|
||||||
|
import tsHljs from 'highlight.js/lib/languages/typescript';
|
||||||
import { useCopy } from '@/composable/copy';
|
import { useCopy } from '@/composable/copy';
|
||||||
|
|
||||||
const props = withDefaults(
|
const props = withDefaults(
|
||||||
@ -30,6 +31,7 @@ hljs.registerLanguage('html', xmlHljs);
|
|||||||
hljs.registerLanguage('xml', xmlHljs);
|
hljs.registerLanguage('xml', xmlHljs);
|
||||||
hljs.registerLanguage('yaml', yamlHljs);
|
hljs.registerLanguage('yaml', yamlHljs);
|
||||||
hljs.registerLanguage('toml', iniHljs);
|
hljs.registerLanguage('toml', iniHljs);
|
||||||
|
hljs.registerLanguage('ts', tsHljs);
|
||||||
|
|
||||||
const { value, language, followHeightOf, copyPlacement, copyMessage } = toRefs(props);
|
const { value, language, followHeightOf, copyPlacement, copyMessage } = toRefs(props);
|
||||||
const { height } = followHeightOf.value ? useElementSize(followHeightOf) : { height: ref(null) };
|
const { height } = followHeightOf.value ? useElementSize(followHeightOf) : { height: ref(null) };
|
||||||
|
@ -18,6 +18,7 @@ import { tool as emojiPicker } from './emoji-picker';
|
|||||||
import { tool as passwordStrengthAnalyser } from './password-strength-analyser';
|
import { tool as passwordStrengthAnalyser } from './password-strength-analyser';
|
||||||
import { tool as yamlToToml } from './yaml-to-toml';
|
import { tool as yamlToToml } from './yaml-to-toml';
|
||||||
import { tool as jsonToToml } from './json-to-toml';
|
import { tool as jsonToToml } from './json-to-toml';
|
||||||
|
import { tool as jsonToTS } from './json-to-ts';
|
||||||
import { tool as tomlToYaml } from './toml-to-yaml';
|
import { tool as tomlToYaml } from './toml-to-yaml';
|
||||||
import { tool as tomlToJson } from './toml-to-json';
|
import { tool as tomlToJson } from './toml-to-json';
|
||||||
import { tool as jsonToCsv } from './json-to-csv';
|
import { tool as jsonToCsv } from './json-to-csv';
|
||||||
@ -104,6 +105,7 @@ export const toolsByCategory: ToolCategory[] = [
|
|||||||
yamlToToml,
|
yamlToToml,
|
||||||
jsonToYaml,
|
jsonToYaml,
|
||||||
jsonToToml,
|
jsonToToml,
|
||||||
|
jsonToTS,
|
||||||
listConverter,
|
listConverter,
|
||||||
tomlToJson,
|
tomlToJson,
|
||||||
tomlToYaml,
|
tomlToYaml,
|
||||||
|
13
src/tools/json-to-ts/index.ts
Normal file
13
src/tools/json-to-ts/index.ts
Normal file
@ -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-ts.title'),
|
||||||
|
path: '/json-to-ts',
|
||||||
|
description: translate('tools.json-to-ts.description'),
|
||||||
|
keywords: ['json', 'parse', 'typescript', 'convert', 'transform'],
|
||||||
|
component: () => import('./json-to-ts.vue'),
|
||||||
|
icon: Braces,
|
||||||
|
createdAt: new Date('2024-04-25'),
|
||||||
|
});
|
45
src/tools/json-to-ts/json-to-ts.e2e.spec.ts
Normal file
45
src/tools/json-to-ts/json-to-ts.e2e.spec.ts
Normal file
@ -0,0 +1,45 @@
|
|||||||
|
import { expect, test } from '@playwright/test';
|
||||||
|
|
||||||
|
test.describe('Tool - JSON to TS', () => {
|
||||||
|
test.beforeEach(async ({ page }) => {
|
||||||
|
await page.goto('/json-to-ts');
|
||||||
|
});
|
||||||
|
|
||||||
|
test('Has correct title', async ({ page }) => {
|
||||||
|
await expect(page).toHaveTitle('JSON to TS - IT Tools');
|
||||||
|
});
|
||||||
|
|
||||||
|
test('JSON is parsed and outputs clean TS', 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(
|
||||||
|
`
|
||||||
|
interface DataProps {
|
||||||
|
foo: string;
|
||||||
|
list: List;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface List {
|
||||||
|
name: string;
|
||||||
|
another: Another;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Another {
|
||||||
|
key: string;
|
||||||
|
}
|
||||||
|
`.trim(),
|
||||||
|
);
|
||||||
|
});
|
||||||
|
});
|
32
src/tools/json-to-ts/json-to-ts.vue
Normal file
32
src/tools/json-to-ts/json-to-ts.vue
Normal file
@ -0,0 +1,32 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import JSON2TS from 'json-to-ts';
|
||||||
|
import JSON5 from 'json5';
|
||||||
|
import { withDefaultOnError } from '../../utils/defaults';
|
||||||
|
import type { UseValidationRule } from '@/composable/validation';
|
||||||
|
|
||||||
|
function convertJsonToTs(value: string) {
|
||||||
|
return JSON2TS(JSON5.parse(value), { rootName: 'DataProps' }).join('\n\n').trim();
|
||||||
|
}
|
||||||
|
|
||||||
|
function transformer(value: string) {
|
||||||
|
return value.trim() === '' ? '' : withDefaultOnError(() => convertJsonToTs(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="TS from your JSON"
|
||||||
|
output-language="ts"
|
||||||
|
:input-validation-rules="rules"
|
||||||
|
:transformer="transformer"
|
||||||
|
/>
|
||||||
|
</template>
|
Loading…
Reference in New Issue
Block a user