feat(new tool): XPath tester

Fix #672

src/tools/index.ts

@@ -2,6 +2,7 @@ import { tool as base64FileConverter } from './base64-file-converter';
 import { tool as base64StringConverter } from './base64-string-converter';
 import { tool as basicAuthGenerator } from './basic-auth-generator';
 import { tool as emailNormalizer } from './email-normalizer';
+import { tool as xpathTester } from './xpath-tester';
 
 import { tool as asciiTextDrawer } from './ascii-text-drawer';
 
@@ -154,6 +155,7 @@ export const toolsByCategory: ToolCategory[] = [
       xmlFormatter,
       yamlViewer,
       emailNormalizer,
+      xpathTester,
     ],
   },
   {

src/tools/xpath-tester/index.ts

@@ -0,0 +1,12 @@
+import { Brackets } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'XPath Tester',
+  path: '/xpath-tester',
+  description: 'Test XPath expression against XML content',
+  keywords: ['xpath', 'xml', 'tester'],
+  component: () => import('./xpath-tester.vue'),
+  icon: Brackets,
+  createdAt: new Date('2024-08-15'),
+});

src/tools/xpath-tester/xpath-tester.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import XPathEngine from 'xpath';
+import { DOMParser } from '@xmldom/xmldom';
+import { useValidation } from '@/composable/validation';
+
+const xpath = ref('//title');
+const xml = ref('<book><title>Harry Potter</title></book>');
+
+const selectedNodes = computed(() => {
+  try {
+    const doc = new DOMParser().parseFromString(xml.value, 'text/xml');
+    return XPathEngine.select(xpath.value, doc);
+  }
+  catch (e: any) {
+    return e.toString();
+  }
+});
+
+const xmlValidation = useValidation({
+  source: xml,
+  rules: [
+    {
+      validator: (v) => {
+        new DOMParser().parseFromString(v, 'text/xml');
+        return true;
+      },
+      message: 'Provided XML is not valid.',
+    },
+  ],
+});
+</script>
+
+<template>
+  <div style="max-width: 600px;">
+    <c-card title="Input" mb-2>
+      <c-input-text
+        v-model:value="xpath"
+        label="XPath Expression"
+        placeholder="Put your XPath expression here..."
+        mb-2
+      />
+
+      <c-input-text
+        v-model:value="xml"
+        label="XML"
+        multiline
+        placeholder="Put your XML here..."
+        rows="5"
+        :validation="xmlValidation"
+        mb-2
+      />
+    </c-card>
+
+    <c-card title="Result(s)">
+      <ul v-if="selectedNodes?.length > 0">
+        <li v-for="(node, index) in selectedNodes" :key="index">
+          {{ node }}
+        </li>
+      </ul>
+      <c-alert v-if="!selectedNodes?.length">
+        XPath expression selected nothing
+      </c-alert>
+    </c-card>
+  </div>
+</template>