From cc728b4b1ccdb9e351a82b067beaf51451d1c0e3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Miguel=20Manzano?= Date: Sat, 17 Jun 2023 13:37:22 +0200 Subject: [PATCH] feat(new tool): xml formatter --- components.d.ts | 2 + package.json | 1 + pnpm-lock.yaml | 15 ++++++ src/tools/index.ts | 2 + src/tools/xml-formatter/index.ts | 12 +++++ .../xml-formatter.service.test.ts | 18 +++++++ .../xml-formatter/xml-formatter.service.ts | 5 ++ src/tools/xml-formatter/xml-formatter.vue | 50 +++++++++++++++++++ 8 files changed, 105 insertions(+) create mode 100644 src/tools/xml-formatter/index.ts create mode 100644 src/tools/xml-formatter/xml-formatter.service.test.ts create mode 100644 src/tools/xml-formatter/xml-formatter.service.ts create mode 100644 src/tools/xml-formatter/xml-formatter.vue diff --git a/components.d.ts b/components.d.ts index 15cda0fd..dc3deebc 100644 --- a/components.d.ts +++ b/components.d.ts @@ -125,6 +125,7 @@ declare module '@vue/runtime-core' { NScrollbar: typeof import('naive-ui')['NScrollbar'] NSelect: typeof import('naive-ui')['NSelect'] NSlider: typeof import('naive-ui')['NSlider'] + NSpace: typeof import('naive-ui')['NSpace'] NStatistic: typeof import('naive-ui')['NStatistic'] NSwitch: typeof import('naive-ui')['NSwitch'] NTable: typeof import('naive-ui')['NTable'] @@ -161,6 +162,7 @@ declare module '@vue/runtime-core' { UserAgentParser: typeof import('./src/tools/user-agent-parser/user-agent-parser.vue')['default'] UserAgentResultCards: typeof import('./src/tools/user-agent-parser/user-agent-result-cards.vue')['default'] UuidGenerator: typeof import('./src/tools/uuid-generator/uuid-generator.vue')['default'] + XmlFormatter: typeof import('./src/tools/xml-formatter/xml-formatter.vue')['default'] YamlToJson: typeof import('./src/tools/yaml-to-json-converter/yaml-to-json.vue')['default'] } } diff --git a/package.json b/package.json index 26a3d5d3..277da558 100644 --- a/package.json +++ b/package.json @@ -76,6 +76,7 @@ "uuid": "^8.3.2", "vue": "^3.2.47", "vue-router": "^4.1.6", + "xml-formatter": "^3.3.2", "yaml": "^2.2.1" }, "devDependencies": { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 914a9e12..99488feb 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -130,6 +130,9 @@ dependencies: vue-router: specifier: ^4.1.6 version: 4.1.6(vue@3.2.47) + xml-formatter: + specifier: ^3.3.2 + version: 3.3.2 yaml: specifier: ^2.2.1 version: 2.2.1 @@ -8883,11 +8886,23 @@ packages: optional: true dev: true + /xml-formatter@3.3.2: + resolution: {integrity: sha512-ld34F1b7+2UQGNkfsAV4MN3/b7cdUstyMj3XJhzKFasOPtMToVCkqmrNcmrRuSlPxgH1K9tXPkqr75gAT3ix2g==} + engines: {node: '>= 14'} + dependencies: + xml-parser-xo: 4.0.5 + dev: false + /xml-name-validator@4.0.0: resolution: {integrity: sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==} engines: {node: '>=12'} dev: true + /xml-parser-xo@4.0.5: + resolution: {integrity: sha512-UWXOHMQ4ySxpUiU3S/9KzPOhninlL8SN1xFfWgX9WjgoZWoLKtEeJIEz4jhKtdFsoZBCYjg9rDEP3qfnpiHagQ==} + engines: {node: '>= 14'} + dev: false + /xmlchars@2.2.0: resolution: {integrity: sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==} dev: true diff --git a/src/tools/index.ts b/src/tools/index.ts index 211a8a81..f451d679 100644 --- a/src/tools/index.ts +++ b/src/tools/index.ts @@ -57,6 +57,7 @@ import { tool as urlEncoder } from './url-encoder'; import { tool as urlParser } from './url-parser'; import { tool as uuidGenerator } from './uuid-generator'; import { tool as macAddressLookup } from './mac-address-lookup'; +import { tool as xmlFormatter } from './xml-formatter'; export const toolsByCategory: ToolCategory[] = [ { @@ -114,6 +115,7 @@ export const toolsByCategory: ToolCategory[] = [ sqlPrettify, chmodCalculator, dockerRunToDockerComposeConverter, + xmlFormatter, ], }, { diff --git a/src/tools/xml-formatter/index.ts b/src/tools/xml-formatter/index.ts new file mode 100644 index 00000000..75b4327f --- /dev/null +++ b/src/tools/xml-formatter/index.ts @@ -0,0 +1,12 @@ +import { ArrowsShuffle } from '@vicons/tabler'; +import { defineTool } from '../tool'; + +export const tool = defineTool({ + name: 'Xml formatter', + path: '/xml-formatter', + description: 'Prettify your XML string to a human friendly readable format.', + keywords: ['xml', 'prettify', 'format'], + component: () => import('./xml-formatter.vue'), + icon: ArrowsShuffle, + createdAt: new Date('2023-06-17'), +}); diff --git a/src/tools/xml-formatter/xml-formatter.service.test.ts b/src/tools/xml-formatter/xml-formatter.service.test.ts new file mode 100644 index 00000000..a58a1d7b --- /dev/null +++ b/src/tools/xml-formatter/xml-formatter.service.test.ts @@ -0,0 +1,18 @@ +import { describe, expect, it } from 'vitest'; +import { formatXml } from './xml-formatter.service'; + +const options = { + indentation: ' ', + collapseContent: true, + lineSeparator: '\n', +}; +const initString = 'foobar'; +const endString = ` + foo + bar +`; +describe('xml-formatter', () => { + it('Should generate same string', () => { + expect(formatXml(initString, options)).toEqual(endString); + }); +}); diff --git a/src/tools/xml-formatter/xml-formatter.service.ts b/src/tools/xml-formatter/xml-formatter.service.ts new file mode 100644 index 00000000..f1b787f8 --- /dev/null +++ b/src/tools/xml-formatter/xml-formatter.service.ts @@ -0,0 +1,5 @@ +import xmlFormat, { type XMLFormatterOptions } from 'xml-formatter'; + +export function formatXml(value: string, options?: XMLFormatterOptions): string { + return xmlFormat(value, options) || ''; +} diff --git a/src/tools/xml-formatter/xml-formatter.vue b/src/tools/xml-formatter/xml-formatter.vue new file mode 100644 index 00000000..efe0b798 --- /dev/null +++ b/src/tools/xml-formatter/xml-formatter.vue @@ -0,0 +1,50 @@ + + +