feat(code): add xml formatter and validator

Author: rwv

pnpm-lock.yaml

@@ -61,9 +61,9 @@ catalog:
   '@vitest/coverage-istanbul': ^4.0.16
   '@vitest/coverage-v8': ^4.0.18
   '@vitest/eslint-plugin': ^1.6.9
+  '@vue/compiler-dom': ^3.5.29
   '@vue/eslint-config-prettier': ^10.2.0
   '@vue/eslint-config-typescript': ^14.7.0
-  '@vue/compiler-dom': ^3.5.29
   '@vue/test-utils': ^2.4.6
   '@vue/tsconfig': ^0.8.1
   '@vueuse/core': 14.2.1
@@ -94,6 +94,7 @@ catalog:
   eslint-plugin-playwright: ^2.7.1
   eslint-plugin-vue: ~10.8.0
   exifr: ^7.1.3
+  fast-xml-parser: ^5.5.1
   figlet: ^1.10.0
   filesize: ^11.0.13
   gifuct-js: ^2.1.2
@@ -165,6 +166,7 @@ catalog:
   webpxmux: ^0.0.2
   webrtc-ips: ^0.2.0
   wrangler: 4.69.0
+  xml-formatter: ^3.6.7
   xml-js: ^1.6.11
   xxhash-wasm: ^1.1.0
 

pnpm-workspace.yaml

@@ -83,14 +83,14 @@
     "@tools/html-entity-encoder-decoder": "workspace:*",
     "@tools/html-to-markdown-converter": "workspace:*",
     "@tools/http-status-code-lookup": "workspace:*",
-    "@tools/image-to-pdf-converter": "workspace:*",
     "@tools/iban-validator": "workspace:*",
     "@tools/ical-event-generator": "workspace:*",
     "@tools/image-metadata-cleaner": "workspace:*",
     "@tools/image-palette-extractor": "workspace:*",
     "@tools/image-resizer": "workspace:*",
     "@tools/image-to-avif-converter": "workspace:*",
     "@tools/image-to-ico": "workspace:*",
+    "@tools/image-to-pdf-converter": "workspace:*",
     "@tools/image-to-webp-converter": "workspace:*",
     "@tools/image-tools": "workspace:*",
     "@tools/imei-validator": "workspace:*",
@@ -136,8 +136,8 @@
     "@tools/pbkdf2-key-derivation": "workspace:*",
     "@tools/pdf-info-viewer": "workspace:*",
     "@tools/pdf-merger": "workspace:*",
-    "@tools/pdf-page-organizer": "workspace:*",
     "@tools/pdf-page-number-adder": "workspace:*",
+    "@tools/pdf-page-organizer": "workspace:*",
     "@tools/pdf-splitter": "workspace:*",
     "@tools/pdf-text-extractor": "workspace:*",
     "@tools/pdf-to-image-converter": "workspace:*",
@@ -209,6 +209,7 @@
     "@tools/vat-validator": "workspace:*",
     "@tools/vin-validator": "workspace:*",
     "@tools/whirlpool-hash-text-or-file": "workspace:*",
+    "@tools/xml-formatter": "workspace:*",
     "@tools/xml-to-json-converter": "workspace:*",
     "@tools/xxhash-xxh3-128-hash-text-or-file": "workspace:*",
     "@tools/xxhash-xxh3-64-hash-text-or-file": "workspace:*",

registry/tools/package.json

@@ -126,6 +126,7 @@ import { toolInfo as yamlToTomlConverterToolInfo } from '@tools/yaml-to-toml-con
 import { toolInfo as tomlToYamlConverterToolInfo } from '@tools/toml-to-yaml-converter'
 import { toolInfo as xmlToJsonConverterToolInfo } from '@tools/xml-to-json-converter'
 import { toolInfo as jsonToXmlConverterToolInfo } from '@tools/json-to-xml-converter'
+import { toolInfo as xmlFormatterToolInfo } from '@tools/xml-formatter'
 import { toolInfo as csvToJsonConverterToolInfo } from '@tools/csv-to-json-converter'
 import { toolInfo as jsonToCsvConverterToolInfo } from '@tools/json-to-csv-converter'
 import { toolInfo as jsonFormatterToolInfo } from '@tools/json-formatter'
@@ -259,6 +260,7 @@ export const tools: ToolInfo[] = [
   tomlToYamlConverterToolInfo,
   xmlToJsonConverterToolInfo,
   jsonToXmlConverterToolInfo,
+  xmlFormatterToolInfo,
   csvToJsonConverterToolInfo,
   jsonToCsvConverterToolInfo,
   jsonFormatterToolInfo,

registry/tools/src/index.ts

@@ -124,6 +124,7 @@ import { routes as yamlToTomlConverterRoutes } from '@tools/yaml-to-toml-convert
 import { routes as tomlToYamlConverterRoutes } from '@tools/toml-to-yaml-converter/routes'
 import { routes as xmlToJsonConverterRoutes } from '@tools/xml-to-json-converter/routes'
 import { routes as jsonToXmlConverterRoutes } from '@tools/json-to-xml-converter/routes'
+import { routes as xmlFormatterRoutes } from '@tools/xml-formatter/routes'
 import { routes as csvToJsonConverterRoutes } from '@tools/csv-to-json-converter/routes'
 import { routes as jsonToCsvConverterRoutes } from '@tools/json-to-csv-converter/routes'
 import { routes as jsonFormatterRoutes } from '@tools/json-formatter/routes'
@@ -331,6 +332,7 @@ export const routes: ToolRoute[] = [
   ...tomlToYamlConverterRoutes,
   ...xmlToJsonConverterRoutes,
   ...jsonToXmlConverterRoutes,
+  ...xmlFormatterRoutes,
   ...csvToJsonConverterRoutes,
   ...jsonToCsvConverterRoutes,
   ...jsonFormatterRoutes,

registry/tools/src/routes.ts

@@ -0,0 +1,24 @@
+{
+  "name": "@tools/xml-formatter",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "exports": {
+    ".": "./src/index.ts",
+    "./routes": "./src/routes.ts"
+  },
+  "dependencies": {
+    "@shared/tools": "workspace:*",
+    "@shared/ui": "workspace:*",
+    "@vicons/fluent": "catalog:",
+    "@vueuse/core": "catalog:",
+    "browser-fs-access": "catalog:",
+    "fast-xml-parser": "catalog:",
+    "highlight.js": "catalog:",
+    "naive-ui": "catalog:",
+    "vue": "catalog:",
+    "vue-i18n": "catalog:",
+    "vue-router": "catalog:",
+    "xml-formatter": "catalog:"
+  }
+}

tools/code/xml-formatter/package.json

@@ -0,0 +1,39 @@
+import { describe, expect, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { defineComponent } from 'vue'
+import XmlFormatterView from './XmlFormatterView.vue'
+import * as toolInfo from './info'
+
+const ToolDefaultPageLayoutStub = defineComponent({
+  name: 'ToolDefaultPageLayout',
+  props: {
+    info: {
+      type: Object,
+      required: true,
+    },
+  },
+  template: '<div class="layout"><slot /></div>',
+})
+
+const XmlFormatterStub = defineComponent({
+  name: 'XmlFormatter',
+  template: '<div class="xml-formatter" />',
+})
+
+describe('XmlFormatterView', () => {
+  it('renders the layout with tool info', () => {
+    const wrapper = mount(XmlFormatterView, {
+      global: {
+        stubs: {
+          ToolDefaultPageLayout: ToolDefaultPageLayoutStub,
+          XmlFormatter: XmlFormatterStub,
+        },
+      },
+    })
+
+    const layout = wrapper.findComponent(ToolDefaultPageLayoutStub)
+    expect(layout.exists()).toBe(true)
+    expect(layout.props('info')).toEqual(toolInfo)
+    expect(wrapper.find('.xml-formatter').exists()).toBe(true)
+  })
+})

tools/code/xml-formatter/src/XmlFormatterView.dom.test.ts

@@ -0,0 +1,11 @@
+<template>
+  <ToolDefaultPageLayout :info="toolInfo">
+    <XmlFormatter />
+  </ToolDefaultPageLayout>
+</template>
+
+<script setup lang="ts">
+import * as toolInfo from './info'
+import { ToolDefaultPageLayout } from '@shared/ui/tool'
+import XmlFormatter from './components/XmlFormatter.vue'
+</script>

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

@@ -0,0 +1,34 @@
+import { describe, expect, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { defineComponent } from 'vue'
+import WhatIsXmlFormatter from './WhatIsXmlFormatter.vue'
+
+const DescriptionMarkdownStub = defineComponent({
+  name: 'DescriptionMarkdown',
+  props: {
+    title: {
+      type: String,
+      required: true,
+    },
+    description: {
+      type: String,
+      required: true,
+    },
+  },
+  template: '<div class="description">{{ title }}|{{ description }}</div>',
+})
+
+describe('WhatIsXmlFormatter', () => {
+  it('renders the explanation block', () => {
+    const wrapper = mount(WhatIsXmlFormatter, {
+      global: {
+        stubs: {
+          DescriptionMarkdown: DescriptionMarkdownStub,
+        },
+      },
+    })
+
+    expect(wrapper.text()).toContain('What is XML formatting and validation?')
+    expect(wrapper.text()).toContain('Everything runs locally in your browser')
+  })
+})