datastar 0.3.1

Datastar SDK for Rust
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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102

<!doctype html>
<html lang="en">
    <head>
        <title>Datastar SDK Activity Feed Demo</title>
        <script src="https://unpkg.com/@tailwindcss/browser@4"></script>
        <script
            type="module"
            src="https://cdn.jsdelivr.net/gh/starfederation/datastar@main/bundles/datastar.js"
        ></script>
    </head>
    <body class="bg-white dark:bg-gray-900 text-lg max-w-xl mx-auto my-16">
        <div
            class="bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400 rounded-lg px-6 py-8 ring shadow-xl ring-gray-900/5 space-y-2"
        >
            <div class="flex justify-between items-center">
                <h1 class="text-gray-900 dark:text-white text-3xl font-semibold">Datastar SDK Activity Feed Demo</h1>
                <img src="https://data-star.dev/static/images/rocket-64x64.png" alt="Rocket" width="64" height="64" />
            </div>
            <p class="mt-2">SSE events will be streamed from the backend to the frontend.</p>
            <div class="space-x-2">
                <input
                    id="events"
                    data-signals-events="200"
                    data-bind-events
                    type="number"
                    step="100"
                    min="0"
                    class="w-36 rounded-md border border-gray-300 px-3 py-2 placeholder-gray-400 shadow-sm focus:border-sky-500 focus:outline focus:outline-sky-500 dark:disabled:border-gray-700 dark:disabled:bg-gray-800/20"
                />
                <label for="events"> Number of events </label>
            </div>
            <div class="space-x-2">
                <input
                    id="interval"
                    data-signals-interval="10"
                    data-bind-interval
                    type="number"
                    step="10"
                    min="0"
                    class="w-36 rounded-md border border-gray-300 px-3 py-2 placeholder-gray-400 shadow-sm focus:border-sky-500 focus:outline focus:outline-sky-500 dark:disabled:border-gray-700 dark:disabled:bg-gray-800/20"
                />
                <label for="interval"> Interval in milliseconds </label>
            </div>
            <button
                id="start-button"
                data-on-click="@post(&#39;/event/generate&#39;)"
                data-signals-generating="false"
                data-attr-disabled="$generating"
                data-class="{
                    'bg-gray-500 text-gray-300 cursor-wait': $generating,
                    'bg-sky-500 text-white cursor-pointer hover:bg-sky-700 hover:text-gray-100': !$generating,
                }"
                class="rounded-md px-5 py-2.5 leading-5 font-semibold"
            >
                Generate
            </button>
            <span>&nbsp;|&nbsp;</span>
            <button
                data-on-click="@post(&#39;/event/done&#39;)"
                class="rounded-md bg-sky-500 px-5 py-2.5 leading-5 font-semibold text-white hover:bg-sky-700 hover:text-gray-100 cursor-pointer"
            >
                Done
            </button>
            <button
                data-on-click="@post(&#39;/event/warn&#39;)"
                class="rounded-md bg-sky-500 px-5 py-2.5 leading-5 font-semibold text-white hover:bg-sky-700 hover:text-gray-100 cursor-pointer"
            >
                Warn
            </button>
            <button
                data-on-click="@post(&#39;/event/fail&#39;)"
                class="rounded-md bg-sky-500 px-5 py-2.5 leading-5 font-semibold text-white hover:bg-sky-700 hover:text-gray-100 cursor-pointer"
            >
                Fail
            </button>
            <button
                data-on-click="@post(&#39;/event/info&#39;)"
                class="rounded-md bg-sky-500 px-5 py-2.5 leading-5 font-semibold text-white hover:bg-sky-700 hover:text-gray-100 cursor-pointer"
            >
                Info
            </button>
        </div>
        <div class="mt-2 text-gray-400 font-mono text-sm rounded-md bg-black p-4">
            <div id="feed">
                Click <code class="text-fuchsia-600">Generate</code> to create
                <span data-text="$events">200</span> events, <span data-text="$interval">10</span> milliseconds
                apart.<br />
                <span class="text-gray-100" data-signals-total="0"> Total: <span data-text="$total">0</span> </span>
                |
                <span class="text-green-500" data-signals-done="0"> Done: <span data-text="$done">0</span> </span>
                |
                <span class="text-yellow-500" data-signals-warn="0"> Warn: <span data-text="$warn">0</span> </span>
                |
                <span class="text-red-500" data-signals-fail="0"> Fail: <span data-text="$fail">0</span> </span>
                |
                <span class="text-blue-500" data-signals-info="0"> Info: <span data-text="$info">0</span> </span>
                <br />
                -------------------------------------------------------------
            </div>
        </div>
    </body>
</html>