Skip to content

Commit 4222451

Browse files
sharevbsharevb
committed
Merge branch 'feat/xslt-tester' into chore/all-my-stuffs
# Conflicts: # components.d.ts # package.json # pnpm-lock.yaml # src/tools/index.ts
2 parents 1dfe831 + b07d0a4 commit 4222451

File tree

5 files changed

+158
-0
lines changed

5 files changed

+158
-0
lines changed

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -263,6 +263,7 @@
263263
"xml-js": "^1.6.11",
264264
"xpath-to-css": "^1.2.0",
265265
"xpath": "^0.0.34",
266+
"xslt-processor": "^3.0.1",
266267
"yaml": "^2.2.1"
267268
},
268269
"devDependencies": {

‎pnpm-lock.yaml

Lines changed: 12 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/tools/index.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@ import { tool as websocketTester } from './websocket-tester';
5454
import { tool as weekNumberConverter } from './week-number-converter';
5555
import { tool as wpaPskGenerator } from './wpa-psk-generator';
5656
import { tool as xpathTester } from './xpath-tester';
57+
import { tool as xsltTester } from './xslt-tester';
5758

5859
import { tool as cssXpathConverter } from './css-xpath-converter';
5960
import { tool as cssSelectorsMemo } from './css-selectors-memo';
@@ -339,6 +340,7 @@ export const toolsByCategory: ToolCategory[] = [
339340
dockerRunToDockerComposeConverter,
340341
dockerComposeToDockerRunConverter,
341342
xmlFormatter,
343+
xsltTester,
342344
yamlViewer,
343345
jsonEditor,
344346
emailNormalizer,

‎src/tools/xslt-tester/index.ts

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { HandMove } from '@vicons/tabler';
2+
import { defineTool } from '../tool';
3+
4+
export const tool = defineTool({
5+
name: 'XSLT tester',
6+
path: '/xslt-tester',
7+
description: 'Allows to test XML transformation using XSLT Stylesheets',
8+
keywords: ['xslt', 'xml', 'tester'],
9+
component: () => import('./xslt-tester.vue'),
10+
icon: HandMove,
11+
createdAt: new Date('2024-05-11'),
12+
});

‎src/tools/xslt-tester/xslt-tester.vue

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
<script setup lang="ts">
2+
import { XmlParser, Xslt } from 'xslt-processor';
3+
import { formatXml } from '../xml-formatter/xml-formatter.service';
4+
import { useValidation } from '@/composable/validation';
5+
6+
const xslt = ref(`<?xml version="1.0" encoding="UTF-8"?>
7+
<xsl:stylesheet version="1.0"
8+
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
9+
<xsl:template match="/">
10+
<html>
11+
<body>
12+
<h2>My CD Collection</h2>
13+
<table border="1">
14+
<tr bgcolor="#9acd32">
15+
<th>Title</th>
16+
<th>Artist</th>
17+
</tr>
18+
<tr>
19+
<td>.</td>
20+
<td>.</td>
21+
</tr>
22+
</table>
23+
</body>
24+
</html>
25+
</xsl:template>
26+
</xsl:stylesheet>`);
27+
const xmlInput = ref(`<?xml version="1.0" encoding="UTF-8"?>
28+
<catalog>
29+
<cd>
30+
<title>Empire Burlesque</title>
31+
<artist>Bob Dylan</artist>
32+
<country>USA</country>
33+
<company>Columbia</company>
34+
<price>10.90</price>
35+
<year>1985</year>
36+
</cd>
37+
<cd>
38+
<title>Hide your heart</title>
39+
<artist>Bonnie Tyler</artist>
40+
<country>UK</country>
41+
<company>CBS Records</company>
42+
<price>9.90</price>
43+
<year>1988</year>
44+
</cd>
45+
</catalog>`);
46+
47+
const formatted = ref(false);
48+
const xmlOutput = computedAsync(async () => {
49+
const xmlString = xmlInput.value;
50+
const xsltString = xslt.value;
51+
const formatResult = formatted.value;
52+
53+
const xsltProcessor = new Xslt();
54+
const xmlParser = new XmlParser();
55+
56+
try {
57+
let xmlOutput = await xsltProcessor.xsltProcess(
58+
xmlParser.xmlParse(xmlString),
59+
xmlParser.xmlParse(xsltString),
60+
);
61+
if (formatResult) {
62+
xmlOutput = formatXml(xmlOutput);
63+
}
64+
return xmlOutput;
65+
}
66+
catch (e: any) {
67+
return e.toString();
68+
}
69+
});
70+
71+
const xsltValidation = useValidation({
72+
source: xslt,
73+
rules: [
74+
{
75+
validator: (v) => {
76+
const xmlParser = new XmlParser();
77+
xmlParser.xmlParse(v);
78+
return true;
79+
},
80+
message: 'Provided XSLT is not valid.',
81+
},
82+
],
83+
});
84+
const xmlInputValidation = useValidation({
85+
source: xmlInput,
86+
rules: [
87+
{
88+
validator: (v) => {
89+
const xmlParser = new XmlParser();
90+
xmlParser.xmlParse(v);
91+
return true;
92+
},
93+
message: 'Provided XML is not valid.',
94+
},
95+
],
96+
});
97+
</script>
98+
99+
<template>
100+
<div style="max-width: 600px;">
101+
<c-card title="Input" mb-2>
102+
<c-input-text
103+
v-model:value="xslt"
104+
label="XLST"
105+
multiline
106+
placeholder="Put your XSLT here..."
107+
rows="5"
108+
:validation="xsltValidation"
109+
mb-2
110+
/>
111+
112+
<c-input-text
113+
v-model:value="xmlInput"
114+
label="XML"
115+
multiline
116+
placeholder="Put your XML here..."
117+
rows="5"
118+
:validation="xmlInputValidation"
119+
mb-2
120+
/>
121+
122+
<n-checkbox v-model:checked="formatted">
123+
Format XML Output?
124+
</n-checkbox>
125+
</c-card>
126+
127+
<c-card title="Output">
128+
<TextareaCopyable :value="xmlOutput" language="xml" />
129+
</c-card>
130+
</div>
131+
</template>

0 commit comments

Comments
 (0)