feat(new tool): XSLT Tester

2024-07-12 22:21:06 +02:00 · 2024-07-12 22:21:06 +02:00 · 29a90937c1
commit 29a90937c1
parent 80e46c9292
6 changed files with 199 additions and 11 deletions
--- a/components.d.ts
+++ b/components.d.ts
@ -211,6 +211,7 @@ declare module '@vue/runtime-core' {
    UuidGenerator: typeof import('./src/tools/uuid-generator/uuid-generator.vue')['default']
    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']
+    XsltTester: typeof import('./src/tools/xslt-tester/xslt-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']
  }
--- a/package.json
+++ b/package.json
@ -89,6 +89,7 @@
    "vue-router": "^4.1.6",
    "vue-tsc": "^1.8.1",
    "xml-formatter": "^3.3.2",
+    "xslt-processor": "^3.0.1",
    "yaml": "^2.2.1"
  },
  "devDependencies": {
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -167,6 +167,9 @@ dependencies:
  xml-formatter:
    specifier: ^3.3.2
    version: 3.3.2
+  xslt-processor:
+    specifier: ^3.0.1
+    version: 3.0.1
  yaml:
    specifier: ^2.2.1
    version: 2.2.1
@ -3374,7 +3377,7 @@ packages:
    dependencies:
      '@unhead/dom': 0.5.1
      '@unhead/schema': 0.5.1
-      '@vueuse/shared': 10.6.1(vue@3.3.4)
+      '@vueuse/shared': 10.11.0(vue@3.3.4)
      unhead: 0.5.1
      vue: 3.3.4
    transitivePeerDependencies:
@ -4007,19 +4010,19 @@ packages:
      - vue
    dev: false

-  /@vueuse/shared@10.3.0(vue@3.3.4):
-    resolution: {integrity: sha512-kGqCTEuFPMK4+fNWy6dUOiYmxGcUbtznMwBZLC1PubidF4VZY05B+Oht7Jh7/6x4VOWGpvu3R37WHi81cKpiqg==}
+  /@vueuse/shared@10.11.0(vue@3.3.4):
+    resolution: {integrity: sha512-fyNoIXEq3PfX1L3NkNhtVQUSRtqYwJtJg+Bp9rIzculIZWHTkKSysujrOk2J+NrRulLTQH9+3gGSfYLWSEWU1A==}
    dependencies:
-      vue-demi: 0.14.5(vue@3.3.4)
+      vue-demi: 0.14.10(vue@3.3.4)
    transitivePeerDependencies:
      - '@vue/composition-api'
      - vue
    dev: false

-  /@vueuse/shared@10.6.1(vue@3.3.4):
-    resolution: {integrity: sha512-TECVDTIedFlL0NUfHWncf3zF9Gc4VfdxfQc8JFwoVZQmxpONhLxFrlm0eHQeidHj4rdTPL3KXJa0TZCk1wnc5Q==}
+  /@vueuse/shared@10.3.0(vue@3.3.4):
+    resolution: {integrity: sha512-kGqCTEuFPMK4+fNWy6dUOiYmxGcUbtznMwBZLC1PubidF4VZY05B+Oht7Jh7/6x4VOWGpvu3R37WHi81cKpiqg==}
    dependencies:
-      vue-demi: 0.14.6(vue@3.3.4)
+      vue-demi: 0.14.5(vue@3.3.4)
    transitivePeerDependencies:
      - '@vue/composition-api'
      - vue
@ -5996,6 +5999,7 @@ packages:

  /he@1.2.0:
    resolution: {integrity: sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==}
+    hasBin: true
    dev: false

  /header-case@1.0.1:
@ -7078,6 +7082,18 @@ packages:
    resolution: {integrity: sha512-NsXBU0UgBxo2rQLOeWNZqS3fvflWePMECr8CoSWoSTqCqGbVVsvl9vZu1HfQicYN0g5piV9Gh8RTEvo/uP752w==}
    dev: true

+  /node-fetch@2.6.7:
+    resolution: {integrity: sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==}
+    engines: {node: 4.x || >=6.0.0}
+    peerDependencies:
+      encoding: ^0.1.0
+    peerDependenciesMeta:
+      encoding:
+        optional: true
+    dependencies:
+      whatwg-url: 5.0.0
+    dev: false
+
  /node-fetch@3.2.10:
    resolution: {integrity: sha512-MhuzNwdURnZ1Cp4XTazr69K0BTizsBroX7Zx3UgDSVcZYKF/6p0CBe4EUb/hLqmzVhl0UpYfgRljQ4yxE+iCxA==}
    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
@ -8510,6 +8526,10 @@ packages:
      url-parse: 1.5.10
    dev: true

+  /tr46@0.0.3:
+    resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==}
+    dev: false
+
  /tr46@1.0.1:
    resolution: {integrity: sha512-dTpowEjclQ7Kgx5SdBkqRzVhERQXov8/l9Ft9dVM9fmg0W0KQSVaXX9T4i6twCPNtYiZM53lpSSUAwJbFPOHxA==}
    dependencies:
@ -9185,8 +9205,8 @@ packages:
      vue: 3.3.4
    dev: false

-  /vue-demi@0.14.5(vue@3.3.4):
-    resolution: {integrity: sha512-o9NUVpl/YlsGJ7t+xuqJKx8EBGf1quRhCiT6D/J0pfwmk9zUwYkC7yrF4SZCe6fETvSM3UNL2edcbYrSyc4QHA==}
+  /vue-demi@0.14.10(vue@3.3.4):
+    resolution: {integrity: sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==}
    engines: {node: '>=12'}
    hasBin: true
    requiresBuild: true
@ -9200,8 +9220,8 @@ packages:
      vue: 3.3.4
    dev: false

-  /vue-demi@0.14.6(vue@3.3.4):
-    resolution: {integrity: sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==}
+  /vue-demi@0.14.5(vue@3.3.4):
+    resolution: {integrity: sha512-o9NUVpl/YlsGJ7t+xuqJKx8EBGf1quRhCiT6D/J0pfwmk9zUwYkC7yrF4SZCe6fETvSM3UNL2edcbYrSyc4QHA==}
    engines: {node: '>=12'}
    hasBin: true
    requiresBuild: true
@ -9319,6 +9339,10 @@ packages:
    engines: {node: '>= 8'}
    dev: true

+  /webidl-conversions@3.0.1:
+    resolution: {integrity: sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==}
+    dev: false
+
  /webidl-conversions@4.0.2:
    resolution: {integrity: sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==}
    dev: true
@ -9359,6 +9383,13 @@ packages:
      webidl-conversions: 7.0.0
    dev: true

+  /whatwg-url@5.0.0:
+    resolution: {integrity: sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==}
+    dependencies:
+      tr46: 0.0.3
+      webidl-conversions: 3.0.1
+    dev: false
+
  /whatwg-url@7.1.0:
    resolution: {integrity: sha512-WUu7Rg1DroM7oQvGWfOiAK21n74Gg+T4elXEQYkOhtyLeWiJFoOGLXPKI/9gzIie9CtwVLm8wtw6YJdKyxSjeg==}
    dependencies:
@ -9497,6 +9528,7 @@ packages:

  /workbox-google-analytics@7.0.0:
    resolution: {integrity: sha512-MEYM1JTn/qiC3DbpvP2BVhyIH+dV/5BjHk756u9VbwuAhu0QHyKscTnisQuz21lfRpOwiS9z4XdqeVAKol0bzg==}
+    deprecated: It is not compatible with newer versions of GA starting with v4, as long as you are using GAv3 it should be ok, but the package is not longer being maintained
    dependencies:
      workbox-background-sync: 7.0.0
      workbox-core: 7.0.0
@ -9611,6 +9643,15 @@ packages:
    resolution: {integrity: sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==}
    dev: true

+  /xslt-processor@3.0.1:
+    resolution: {integrity: sha512-XELmhWnCFHfsfAhl0jKetcVIzSnZt90lOcPPCzoEc4+ZqfXGXxddo7q93bc0piDKLKF8EP2OCKc0EVnPwFd2aA==}
+    dependencies:
+      he: 1.2.0
+      node-fetch: 2.6.7
+    transitivePeerDependencies:
+      - encoding
+    dev: false
+
  /y18n@4.0.3:
    resolution: {integrity: sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==}
    dev: false
--- a/src/tools/index.ts
+++ b/src/tools/index.ts
@ -1,6 +1,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 xsltTester } from './xslt-tester';
 import { tool as pdfSignatureChecker } from './pdf-signature-checker';
 import { tool as numeronymGenerator } from './numeronym-generator';
 import { tool as macAddressGenerator } from './mac-address-generator';
@ -139,6 +140,7 @@ export const toolsByCategory: ToolCategory[] = [
      chmodCalculator,
      dockerRunToDockerComposeConverter,
      xmlFormatter,
+      xsltTester,
    ],
  },
  {
--- a/src/tools/xslt-tester/index.ts
+++ b/src/tools/xslt-tester/index.ts
@ -0,0 +1,12 @@
+import { HandMove } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'XSLT tester',
+  path: '/xslt-tester',
+  description: 'Allows to test XML transformation using XSLT Stylesheets',
+  keywords: ['xslt', 'xml', 'tester'],
+  component: () => import('./xslt-tester.vue'),
+  icon: HandMove,
+  createdAt: new Date('2024-05-11'),
+});
--- a/src/tools/xslt-tester/xslt-tester.vue
+++ b/src/tools/xslt-tester/xslt-tester.vue
@ -0,0 +1,131 @@
+<script setup lang="ts">
+import { XmlParser, Xslt } from 'xslt-processor';
+import { formatXml } from '../xml-formatter/xml-formatter.service';
+import { useValidation } from '@/composable/validation';
+
+const xslt = ref(`<?xml version="1.0" encoding="UTF-8"?>
+<xsl:stylesheet version="1.0"
+xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
+<xsl:template match="/">
+  <html>
+  <body>
+    <h2>My CD Collection</h2>
+    <table border="1">
+      <tr bgcolor="#9acd32">
+        <th>Title</th>
+        <th>Artist</th>
+      </tr>
+      <tr>
+        <td>.</td>
+        <td>.</td>
+      </tr>
+    </table>
+  </body>
+  </html>
+</xsl:template>
+</xsl:stylesheet>`);
+const xmlInput = ref(`<?xml version="1.0" encoding="UTF-8"?>
+<catalog>
+  <cd>
+    <title>Empire Burlesque</title>
+    <artist>Bob Dylan</artist>
+    <country>USA</country>
+    <company>Columbia</company>
+    <price>10.90</price>
+    <year>1985</year>
+  </cd>
+  <cd>
+    <title>Hide your heart</title>
+    <artist>Bonnie Tyler</artist>
+    <country>UK</country>
+    <company>CBS Records</company>
+    <price>9.90</price>
+    <year>1988</year>
+  </cd>
+</catalog>`);
+
+const formatted = ref(false);
+const xmlOutput = computedAsync(async () => {
+  const xmlString = xmlInput.value;
+  const xsltString = xslt.value;
+  const formatResult = formatted.value;
+
+  const xsltProcessor = new Xslt();
+  const xmlParser = new XmlParser();
+
+  try {
+    let xmlOutput = await xsltProcessor.xsltProcess(
+      xmlParser.xmlParse(xmlString),
+      xmlParser.xmlParse(xsltString),
+    );
+    if (formatResult) {
+      xmlOutput = formatXml(xmlOutput);
+    }
+    return xmlOutput;
+  }
+  catch (e: any) {
+    return e.toString();
+  }
+});
+
+const xsltValidation = useValidation({
+  source: xslt,
+  rules: [
+    {
+      validator: (v) => {
+        const xmlParser = new XmlParser();
+        xmlParser.xmlParse(v);
+        return true;
+      },
+      message: 'Provided XSLT is not valid.',
+    },
+  ],
+});
+const xmlInputValidation = useValidation({
+  source: xmlInput,
+  rules: [
+    {
+      validator: (v) => {
+        const xmlParser = new XmlParser();
+        xmlParser.xmlParse(v);
+        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="xslt"
+        label="XLST"
+        multiline
+        placeholder="Put your XSLT here..."
+        rows="5"
+        :validation="xsltValidation"
+        mb-2
+      />
+
+      <c-input-text
+        v-model:value="xmlInput"
+        label="XML"
+        multiline
+        placeholder="Put your XML here..."
+        rows="5"
+        :validation="xmlInputValidation"
+        mb-2
+      />
+
+      <n-checkbox v-model:checked="formatted">
+        Format XML Output?
+      </n-checkbox>
+    </c-card>
+
+    <c-card title="Output">
+      <TextareaCopyable :value="xmlOutput" language="xml" />
+    </c-card>
+  </div>
+</template>