-
Notifications
You must be signed in to change notification settings - Fork 0
/
csv.html
105 lines (96 loc) · 2.84 KB
/
csv.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<!doctype html>
<meta charset="utf-8" />
<link rel="stylesheet" href="./style.css" />
<title>csv encoding playground</title>
<style type="text/css">
form {
grid-template-areas:
"input"
"lbl-A"
"box-A"
"lbl-B"
"box-B"
"lbl-C"
"box-C"
;
}
@media (min-width: 600px) {
form {
grid-template-columns: 15em 1fr;
grid-template-areas:
"input input"
"lbl-A box-A"
"lbl-B box-B"
"lbl-C box-C"
;
}
}
@media (min-width: 900px) {
form {
grid-template-columns: 1fr 15em 2fr;
grid-template-areas:
"input lbl-A box-A"
"input lbl-B box-B"
"input lbl-C box-C"
;
}
}
</style>
<h1>👨💻 csv encoding playground</h1>
<form id="decode">
<div style="grid-area: input" class="input">
<textarea class="input-box" name="input" placeholder="loading parsers..."></textarea>
<button type="submit" disabled>Parse!</button>
</div>
<div style="grid-area: lbl-A">
<h3>deno: /std/encoding</h3>
<h4>@0.105.0</h4>
<p><a href="https://deno.land/[email protected]/encoding/csv.ts">source</a></p>
</div>
<textarea style="grid-area: box-A" class="out" name="outA"
readonly placeholder="/std output"></textarea>
<div style="grid-area: lbl-B">
<h3>npm: csv-parse</h3>
<h4>@4.15.3</h4>
<p>
<a href="https://www.npmjs.com/package/csv-parse">npm</a>
</p>
</div>
<textarea style="grid-area: box-B" class="out" name="outB"
readonly placeholder="csv-parse output"></textarea>
<div style="grid-area: lbl-C">
<h3>npm: papaparse</h3>
<h4>@5.3.0</h4>
<p>
<a href="https://www.npmjs.com/package/papaparse">npm</a>
</p>
</div>
<textarea style="grid-area: box-C" class="out" name="outC"
readonly placeholder="papaparse output"></textarea>
</form>
<script>
// register this handler immediately for UX purposes
document
.querySelector('form')
.addEventListener('submit', evt => {
evt.preventDefault();
});
</script>
<script type="module">
import { parse as parseA } from './deno_std/0.105.0/csv.js';
import {} from 'https://cdn.jsdelivr.net/npm/[email protected]/lib/browser/index.js';
const parseB = text => new Promise((ok, err) => parse(text, (error, data) => error ? err(error) : ok(data)));
import papaparse from 'https://esm.sh/[email protected]';
const parseC = text => papaparse.parse(text)?.data;
import { bindFormState, registerParsers } from './form.js';
window.onhashchange = bindFormState({
form: document.querySelector('form'),
inputBox: document.querySelector('[name=input]'),
parseNow: registerParsers([
[ parseA, document.querySelector('[name=outA]') ],
[ parseB, document.querySelector('[name=outB]') ],
[ parseC, document.querySelector('[name=outC]') ],
]),
location: window.location,
});
</script>