noyalib-wasm 0.0.15

WebAssembly (wasm-bindgen) bindings for the noyalib YAML library — browser-ready parse / serialise / lossless edit
Documentation 
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

<!-- SPDX-License-Identifier: Apache-2.0 OR MIT -->
<!--
  noyalib-wasm — in-browser YAML editor demo.

  Build:
    wasm-pack build --release --target web crates/noyalib-wasm
    cd crates/noyalib-wasm/examples/browser
    python3 -m http.server     # or any static-file server

  Then visit http://localhost:8000/.
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>noyalib-wasm — browser demo</title>
    <style>
      body { font-family: monospace; max-width: 720px; margin: 2rem auto; padding: 0 1rem; }
      textarea { width: 100%; height: 12rem; font-family: monospace; font-size: 0.95rem; }
      pre { background: #f3f4f6; padding: 0.75rem; border-radius: 4px; }
      .row { margin: 1rem 0; }
      .ok { color: #059669; }
      .err { color: #dc2626; }
    </style>
</head>
<body>
    <h1>noyalib-wasm</h1>
    <p>Edit the YAML below; the parser runs in-browser via WASM.</p>

    <div class="row">
        <textarea id="input">host: api.example.com
port: 8080
features:
  - auth
  - api
</textarea>
    </div>

    <div class="row">
        <strong>Status:</strong> <span id="status">…</span>
    </div>

    <div class="row">
        <strong>Parsed JSON:</strong>
        <pre id="output"></pre>
    </div>

    <script type="module">
        import init, { parse } from "../../pkg/noyalib_wasm.js";

        const input  = document.getElementById("input");
        const status = document.getElementById("status");
        const output = document.getElementById("output");

        await init();

        const refresh = () => {
            try {
                const obj = parse(input.value);
                status.textContent = "valid ✓";
                status.className   = "ok";
                output.textContent = JSON.stringify(obj, null, 2);
            } catch (e) {
                status.textContent = "parse error: " + e.message;
                status.className   = "err";
                output.textContent = "";
            }
        };

        input.addEventListener("input", refresh);
        refresh();
    </script>
</body>
</html>