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
106
107
108
109
110
111
112
113
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type"/>
</head>
<body>
<!-- Note the usage of `type=module` here as this is an ES6 module -->
<script type="module">
// Use ES module import syntax to import functionality from the module
// that we have compiled.
//
// Note that the `default` import is an initialization function which
// will "boot" the module and make it ready to use. Currently browsers
// don't support natively imported WebAssembly as an ES module, but
// eventually the manual initialization won't be required!
import init, { parse, set_panic_hook } from './pkg/nlcep.js';
async function run() {
// First up we need to actually load the Wasm file, so we use the
// default export to inform it where the Wasm file is located on the
// server, and then we wait on the returned promise to wait for the
// Wasm to be loaded.
//
// It may look like this: `await init('./pkg/without_a_bundler_bg.wasm');`,
// but there is also a handy default inside `init` function, which uses
// `import.meta` to locate the Wasm file relatively to js file.
//
// Note that instead of a string you can also pass in any of the
// following things:
//
// * `WebAssembly.Module`
//
// * `ArrayBuffer`
//
// * `Response`
//
// * `Promise` which returns any of the above, e.g. `fetch("./path/to/wasm")`
//
// This gives you complete control over how the module is loaded
// and compiled.
//
// Also note that the promise, when resolved, yields the Wasm module's
// exports which is the same as importing the `*_bg` module in other
// modes
await init();
console.log("Init success!");
set_panic_hook();
console.log("Panic hook set!");
const msgBox = document.querySelector("#msg");
const errBox = document.querySelector("#err");
const inputBox = document.querySelector("#parse-input");
function updateUI(obj, err) {
if(err) {
errBox.innerHTML = err;
} else {
errBox.innerHTML = "";
}
const input = inputBox.value;
let what = "?";
let when = "?";
let where = "?";
if(obj) {
what = obj.summary;
when = `${obj.date}${obj.time ? " " + obj.time : ""}`;
if(obj.location) {
where = obj.location;
}
} else if (input) {
what = input;
}
msgBox.innerHTML = `What: ${what}<br>When: ${when}<br>Where: ${where}`;
inputBox.disabled = false;
}
function process(val) {
function ev() {
// And afterwards we can use all the functionality defined in wasm.
const res = parse(val);
if(res.Ok) {
return res.Ok;
}
if(res.Err) {
throw res.Err;
}
throw "unintelligible result!" + res;
}
try {
const res = ev();
console.log(res);
updateUI(res, null);
} catch(e) {
updateUI(null, e);
}
}
inputBox.onkeyup = () => {
const val = inputBox.value;
process(val);
};
process("");
inputBox.focus();
}
run();
</script>
<main>
<h1>NLCEP</h1>
<input id="parse-input" placeholder="Meet with Johanna tomorrow 11:00, Graphic Plaza" disabled="true" style="width: min(400px, 90vw);" />
<p id="msg">Loading wasm, please wait...</p>
<p id="err"></p>
</main>
</body>
</html>