mirrors/it-tools
1
0
Fork 0
mirror of https://github.com/CorentinTh/it-tools.git synced 2025-05-04 21:37:11 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

feat(new tool): XSLT Tester

Browse source
This commit is contained in:
sharevb 2024-07-12 22:21:06 +02:00 • committed by ShareVB
parent 80e46c9292
commit 29a90937c1
6 changed files with 199 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/tools/index.ts
View file

@ -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,
],
},
{

12
src/tools/xslt-tester/index.ts Normal file
View file

@ -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'),
});

131
src/tools/xslt-tester/xslt-tester.vue Normal file
View file

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