Merge branch 'feat/xpath-tester' into chore/all-my-stuffs

# Conflicts:
#	components.d.ts
#	package.json
#	pnpm-lock.yaml
#	src/tools/index.ts

Author: sharevb

package.json

@@ -102,6 +102,7 @@
     "@vueuse/router": "^10.0.0",
     "@zxing/library": "^0.21.0",
     "arr-diff": "^4.0.0",
+    "@xmldom/xmldom": "^0.8.10",
     "bcryptjs": "^2.4.3",
     "big.js": "^6.2.2",
     "change-case": "^4.1.2",
@@ -261,6 +262,7 @@
     "xml-formatter": "^3.3.2",
     "xml-js": "^1.6.11",
     "xpath-to-css": "^1.2.0",
+    "xpath": "^0.0.34",
     "yaml": "^2.2.1"
   },
   "devDependencies": {

pnpm-lock.yaml

@@ -53,6 +53,7 @@ import { tool as vatValidator } from './vat-validator';
 import { tool as websocketTester } from './websocket-tester';
 import { tool as weekNumberConverter } from './week-number-converter';
 import { tool as wpaPskGenerator } from './wpa-psk-generator';
+import { tool as xpathTester } from './xpath-tester';
 
 import { tool as cssXpathConverter } from './css-xpath-converter';
 import { tool as cssSelectorsMemo } from './css-selectors-memo';
@@ -358,6 +359,7 @@ export const toolsByCategory: ToolCategory[] = [
       regexTester,
       regexMemo,
       stacktracePrettier,
+      xpathTester,
     ],
   },
   {

src/tools/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/index.ts

@@ -0,0 +1,66 @@
+<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');
+    const result = XPathEngine.select(xpath.value, doc);
+    return Array.isArray(result) ? result : [result];
+  }
+  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>