feat(new tool): xml formatter

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']
   }
 }

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": {

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

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,
     ],
   },
   {

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'),
+});

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 = '<hello><world>foo</world><world>bar</world></hello>';
+const endString = `<hello>
+  <world>foo</world>
+  <world>bar</world>
+</hello>`;
+describe('xml-formatter', () => {
+  it('Should generate same string', () => {
+    expect(formatXml(initString, options)).toEqual(endString);
+  });
+});

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) || '';
+}

src/tools/xml-formatter/xml-formatter.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { formatXml } from './xml-formatter.service';
+import type { UseValidationRule } from '@/composable/validation';
+import { isNotThrowing } from '@/utils/boolean';
+import { withDefaultOnError } from '@/utils/defaults';
+
+const defaultValue = '<hello><world>foo</world><world>bar</world></hello>';
+const indentSize = useStorage('xml-formatter:indent-size', 2);
+const collapseContent = useStorage('xml-formatter:collapse-content', true);
+function transformer(value: string) {
+  return withDefaultOnError(() => {
+    const def = {
+      indentation: ' '.repeat(indentSize.value),
+      collapseContent: collapseContent.value,
+      lineSeparator: '\n\r',
+    };
+    return formatXml(value, def);
+  }, '');
+}
+
+const rules: UseValidationRule<string>[] = [
+  {
+    validator: (value: string) => isNotThrowing(() => formatXml(value)),
+    message: 'Provided XML is not valid.',
+  },
+];
+</script>
+
+<template>
+  <div style="flex: 0 0 100%">
+    <n-space style="margin: 0 auto; max-width: 600px" justify="center">
+      <n-form-item label="Collapse Content :" label-placement="left" label-width="100">
+        <n-switch v-model:value="collapseContent" />
+      </n-form-item>
+      <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>
+    </n-space>
+  </div>
+
+  <format-transformer
+    input-label="Your XML"
+    input-placeholder="Paste your xml here..."
+    output-label="Formatted XML from your XML"
+    output-language="xml"
+    :input-validation-rules="rules"
+    :transformer="transformer"
+    :input-default="defaultValue"
+  />
+</template>