tui-lipan 0.2.0

Opinionated, component-based TUI framework for Rust - declarative components, reconciliation, layout engine, focus, overlays, and rich widgets on top of ratatui.
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
75
76
77
78
79
80
81
82

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>tui-lipan wasm + xterm (reference host)</title>
        <link
            rel="stylesheet"
            href="https://cdn.jsdelivr.net/npm/xterm@5.3.0/css/xterm.min.css"
        />
    </head>
    <body>
        <p style="font-family: system-ui; font-size: 14px; margin: 8px">
            Reference only: wire your wasm-pack output where marked
            <code>WASM</code>. Keys the app does not consume should reach the
            browser (e.g. find, F12) only if the browser delivers them to the
            page - many tab/window shortcuts never do.
        </p>
        <div id="term" style="width: 100%; height: 85vh"></div>
        <script type="module">
            import { Terminal } from "https://cdn.jsdelivr.net/npm/xterm@5.3.0/+esm";
            import { FitAddon } from "https://cdn.jsdelivr.net/npm/xterm-addon-fit@0.8.0/+esm";

            const term = new Terminal({
                disableStdin: true,
                fontFamily: "monospace",
                theme: { background: "#1e1e1e", foreground: "#d4d4d4" },
            });
            const fit = new FitAddon();
            term.loadAddon(fit);
            term.open(document.getElementById("term"));
            fit.fit();
            const termEl = document.getElementById("term");
            let roRaf = 0;
            let lastCr = { c: term.cols, r: term.rows };
            new ResizeObserver(() => {
                if (roRaf) cancelAnimationFrame(roRaf);
                roRaf = requestAnimationFrame(() => {
                    roRaf = 0;
                    fit.fit();
                    const c = term.cols;
                    const r = term.rows;
                    if (c === lastCr.c && r === lastCr.r) return;
                    lastCr = { c, r };
                    // WASM: wasmApp.set_viewport(c, r) when wired
                });
            }).observe(termEl);

            let wasmApp = null;
            async function initWasm() {
                // WASM: replace with your wasm-pack --target web bootstrap, e.g.:
                // const wasm = await import("./pkg/your_crate.js");
                // await wasm.default();
                // wasmApp = wasm.WebTerminal.new(...);
                wasmApp = {
                    dispatch_key_event(ev) {
                        console.warn("stub dispatch_key_event", ev.key, ev);
                        return false;
                    },
                    set_viewport(cols, rows) {},
                };
            }
            await initWasm();

            term.attachCustomKeyEventHandler((ev) => {
                if (ev.type !== "keydown") {
                    return true;
                }
                let handled = false;
                try {
                    handled = wasmApp.dispatch_key_event(ev);
                } catch (e) {
                    console.error(e);
                }
                if (handled) {
                    ev.preventDefault();
                    ev.stopPropagation();
                }
                return false;
            });
        </script>
    </body>
</html>