Skip to content

Commit a5dbd99

Browse files
rengglirenggli
committed
Demo the latest XPath features in the web-demo
1 parent ca5b73a commit a5dbd99

4 files changed

Lines changed: 98 additions & 44 deletions

File tree

‎LICENSE‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
The MIT License
22

3-
Copyright (c) 2006-2025 Lukas Renggli.
3+
Copyright (c) 2006-2026 Lukas Renggli.
44
All rights reserved.
55

66
Permission is hereby granted, free of charge, to any person obtaining a copy

‎pubspec.yaml‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,3 +29,6 @@ dev_dependencies:
2929
build_web_compilers: ^4.1.0
3030
lints: ^6.0.0
3131
test: ^1.26.0
32+
dependency_overrides:
33+
xml:
34+
git: https://github.com/renggli/dart-xml.git

‎web/xml/xml.dart‎

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ final xpathError = document.querySelector('#xpath-error') as HTMLElement;
1212
final domPretty = document.querySelector('#dom-pretty') as HTMLInputElement;
1313
final saxOutput = document.querySelector('#sax-output') as HTMLElement;
1414
final domOutput = document.querySelector('#dom-output') as HTMLElement;
15+
final xpathOutput = document.querySelector('#xpath-output') as HTMLElement;
1516

1617
Element appendString(Element element, String object) {
1718
object
@@ -87,16 +88,31 @@ void updateDom(XmlDocument document) {
8788
document = XmlDocument.parse(document.toXmlString(pretty: true));
8889
}
8990
// Find the XPath matches.
90-
final matches = <XmlNode>{};
91+
late final List<Object> results;
9192
try {
9293
// ignore: experimental_member_use
93-
matches.addAll(document.xpath(xpathInput.value));
94+
results = document.xpathEvaluate(xpathInput.value).toList();
9495
xpathError.innerText = '';
9596
} catch (error) {
9697
xpathError.innerText = error.toString();
9798
}
9899
// Render the highlighted document.
99-
HighlightWriter(HtmlBuffer(domOutput), matches).visit(document);
100+
HighlightWriter(
101+
HtmlBuffer(domOutput),
102+
results.whereType<XmlNode>().toSet(),
103+
).visit(document);
104+
// Render the XPath results.
105+
updateXPath(results);
106+
}
107+
108+
void updateXPath(List<Object> results) {
109+
final list = document.createElement('ol');
110+
for (final result in results) {
111+
final element = document.createElement('li');
112+
element.appendChild(document.createTextNode(result.toString()));
113+
list.appendChild(element);
114+
}
115+
xpathOutput.replaceChildren(list);
100116
}
101117

102118
void selectDom(MouseEvent event) {

‎web/xml/xml.html‎

Lines changed: 75 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,62 @@
11
<!DOCTYPE html>
22
<html>
3+
34
<head>
45
<meta charset="utf-8">
56
<title>XML Parser</title>
6-
<link rel="stylesheet"
7-
href="//cdn.rawgit.com/milligram/milligram/master/dist/milligram.min.css">
7+
<link rel="stylesheet" href="//cdn.rawgit.com/milligram/milligram/master/dist/milligram.min.css">
88
<style>
9-
textarea { width: 100%; height: 200px; }
10-
textarea, input { font-family: monospace; }
11-
#sax-output, #dom-output { font-family: monospace; vertical-align: top; width: 50%; }
12-
#sax-output div { display: flex; }
13-
#sax-output div span { flex: 1; }
14-
#dom-output { white-space: pre; }
15-
#dom-output .selection { background-color: #9b4dca; color: #fff; }
16-
.error { color: red; font-weight: normal; }
9+
textarea {
10+
width: 100%;
11+
height: 200px;
12+
}
13+
14+
textarea,
15+
input {
16+
font-family: monospace;
17+
}
18+
19+
#sax-output,
20+
#dom-output,
21+
#xpath-output {
22+
font-family: monospace;
23+
vertical-align: top;
24+
width: 33%;
25+
}
26+
27+
#sax-output div {
28+
display: flex;
29+
}
30+
31+
#sax-output div span {
32+
flex: 1;
33+
}
34+
35+
#dom-output {
36+
white-space: pre;
37+
}
38+
39+
#dom-output .selection {
40+
background-color: #9b4dca;
41+
color: #fff;
42+
}
43+
44+
.error {
45+
color: red;
46+
font-weight: normal;
47+
}
1748
</style>
1849
<script async src="https://www.googletagmanager.com/gtag/js?id=G-QK0KCHXW3F"></script>
19-
<script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-QK0KCHXW3F');</script>
50+
<script>window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag('js', new Date()); gtag('config', 'G-QK0KCHXW3F');</script>
2051
</head>
52+
2153
<body>
22-
<h1>XML Parser</h1>
54+
<h1>XML Parser</h1>
2355

24-
<h2>Input</h2>
25-
<fieldset>
26-
<label for="xml-input">XML</label>
27-
<textarea id="xml-input"><?xml version="1.0"?>
56+
<h2>Input</h2>
57+
<fieldset>
58+
<label for="xml-input">XML</label>
59+
<textarea id="xml-input"><?xml version="1.0"?>
2860
<bookshelf>
2961
<book>
3062
<title lang="en" pages="328" year="1949">Nineteen Eighty-Four</title>
@@ -42,31 +74,34 @@ <h2>Input</h2>
4274
</book>
4375
</bookshelf></textarea>
4476

45-
<label for="xpath-input">XPath <span id="xpath-error" class="error"></span></label>
46-
<input id="xpath-input" value="//book[title/@lang=&quot;en&quot;]/author/text()">
77+
<label for="xpath-input">XPath <span id="xpath-error" class="error"></span></label>
78+
<input id="xpath-input" value="//book[title/@lang=&quot;en&quot;]/author/text()">
4779

48-
<input id="dom-pretty" type="checkbox">
49-
<label for="dom-pretty" class="label-inline">Pretty-print DOM</label>
50-
</fieldset>
80+
<input id="dom-pretty" type="checkbox">
81+
<label for="dom-pretty" class="label-inline">Pretty-print DOM</label>
82+
</fieldset>
5183

52-
<h2>Output</h2>
53-
<table>
54-
<thead>
55-
<tr>
56-
<th>Events (SAX)</th>
57-
<th>DOM with XPath</th>
58-
</tr>
59-
</thead>
60-
<tbody>
61-
<tr>
62-
<td id="sax-output"></td>
63-
<td id="dom-output"></td>
64-
</tr>
65-
</tbody>
66-
</table>
84+
<h2>Output</h2>
85+
<table>
86+
<thead>
87+
<tr>
88+
<th>XML Events (SAX)</th>
89+
<th>XML DOM</th>
90+
<th>XPath</th>
91+
</tr>
92+
</thead>
93+
<tbody>
94+
<tr>
95+
<td id="sax-output"></td>
96+
<td id="dom-output"></td>
97+
<td id="xpath-output"></td>
98+
</tr>
99+
</tbody>
100+
</table>
67101

68-
<script src="xml.dart.js"></script>
69-
<script async src="https://www.googletagmanager.com/gtag/js?id=G-QK0KCHXW3F"></script>
70-
<script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-QK0KCHXW3F');</script>
102+
<script src="xml.dart.js"></script>
103+
<script async src="https://www.googletagmanager.com/gtag/js?id=G-QK0KCHXW3F"></script>
104+
<script>window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag('js', new Date()); gtag('config', 'G-QK0KCHXW3F');</script>
71105
</body>
72-
</html>
106+
107+
</html>

0 commit comments

Comments
 (0)