feat(new tool): XPath tester

Fix CorentinTh#672

Author: sharevb

components.d.ts

@@ -129,22 +129,15 @@ declare module '@vue/runtime-core' {
     MetaTagGenerator: typeof import('./src/tools/meta-tag-generator/meta-tag-generator.vue')['default']
     MimeTypes: typeof import('./src/tools/mime-types/mime-types.vue')['default']
     NavbarButtons: typeof import('./src/components/NavbarButtons.vue')['default']
-    NCode: typeof import('naive-ui')['NCode']
     NCollapseTransition: typeof import('naive-ui')['NCollapseTransition']
     NConfigProvider: typeof import('naive-ui')['NConfigProvider']
     NEllipsis: typeof import('naive-ui')['NEllipsis']
-    NForm: typeof import('naive-ui')['NForm']
-    NFormItem: typeof import('naive-ui')['NFormItem']
     NH1: typeof import('naive-ui')['NH1']
     NH3: typeof import('naive-ui')['NH3']
     NIcon: typeof import('naive-ui')['NIcon']
-    NInputNumber: typeof import('naive-ui')['NInputNumber']
     NLayout: typeof import('naive-ui')['NLayout']
     NLayoutSider: typeof import('naive-ui')['NLayoutSider']
     NMenu: typeof import('naive-ui')['NMenu']
-    NScrollbar: typeof import('naive-ui')['NScrollbar']
-    NSlider: typeof import('naive-ui')['NSlider']
-    NSwitch: typeof import('naive-ui')['NSwitch']
     NumeronymGenerator: typeof import('./src/tools/numeronym-generator/numeronym-generator.vue')['default']
     OtpCodeGeneratorAndValidator: typeof import('./src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue')['default']
     PasswordStrengthAnalyser: typeof import('./src/tools/password-strength-analyser/password-strength-analyser.vue')['default']
@@ -187,6 +180,7 @@ declare module '@vue/runtime-core' {
     WifiQrCodeGenerator: typeof import('./src/tools/wifi-qr-code-generator/wifi-qr-code-generator.vue')['default']
     XmlFormatter: typeof import('./src/tools/xml-formatter/xml-formatter.vue')['default']
     XmlToJson: typeof import('./src/tools/xml-to-json/xml-to-json.vue')['default']
+    XpathTester: typeof import('./src/tools/xpath-tester/xpath-tester.vue')['default']
     YamlToJson: typeof import('./src/tools/yaml-to-json-converter/yaml-to-json.vue')['default']
     YamlToToml: typeof import('./src/tools/yaml-to-toml/yaml-to-toml.vue')['default']
     YamlViewer: typeof import('./src/tools/yaml-viewer/yaml-viewer.vue')['default']

package.json

@@ -47,6 +47,7 @@
     "@vueuse/core": "^10.3.0",
     "@vueuse/head": "^1.0.0",
     "@vueuse/router": "^10.0.0",
+    "@xmldom/xmldom": "^0.8.10",
     "bcryptjs": "^2.4.3",
     "change-case": "^4.1.2",
     "colord": "^2.9.3",
@@ -94,6 +95,7 @@
     "vue-tsc": "^1.8.1",
     "xml-formatter": "^3.3.2",
     "xml-js": "^1.6.11",
+    "xpath": "^0.0.34",
     "yaml": "^2.2.1"
   },
   "devDependencies": {

pnpm-lock.yaml

@@ -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/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,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>