datastar-ssegen 1.0.2 → 1.1.0
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +8 -8
- package/examples/bun.example.js +2 -2
- package/examples/commonHandlers.js +8 -8
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
|
|
6
6
|
## Overview
|
|
7
7
|
|
|
8
|
-
The `datastar-ssegen` is a backend JavaScript module designed to generate Server-Sent Events (SSE) for connected [Datastar](https://data-star.dev/) clients. It supports popular server frameworks such as Express.js, Node.js, and Hyper Express.js, and Bun and Elysia.
|
|
8
|
+
The `datastar-ssegen` is a backend JavaScript module designed to generate Server-Sent Events (SSE) for connected [Datastar](https://data-star.dev/) (v1.0.0-beta.1) clients. It supports popular server frameworks such as Express.js, Node.js, and Hyper Express.js, and Bun and Elysia.
|
|
9
9
|
|
|
10
10
|
This package is engineered to integrate tightly with request and response objects of these backend frameworks, enabling efficient and reactive web application development.
|
|
11
11
|
|
|
@@ -69,13 +69,13 @@ Here's a simple HTML page to interact with the server:
|
|
|
69
69
|
<meta charset="UTF-8">
|
|
70
70
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
71
71
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
72
|
-
<script type="module" src="https://cdn.jsdelivr.net/gh/starfederation/datastar/bundles/datastar.js"></script>
|
|
72
|
+
<script type="module" src="https://cdn.jsdelivr.net/gh/starfederation/datastar@v1.0.0-beta.1/bundles/datastar.js"></script>
|
|
73
73
|
<title>SSE Example</title>
|
|
74
74
|
</head>
|
|
75
75
|
<body>
|
|
76
76
|
<h1>SSE Demo</h1>
|
|
77
|
-
<div id="qoute" data-on-load="
|
|
78
|
-
<div id="clock" data-on-load="
|
|
77
|
+
<div id="qoute" data-on-load="@get('/qoute')">Qoute: </div><button onclick="@get('/qoute')">Get New Qoute</button>
|
|
78
|
+
<div id="clock" data-on-load="@get('/clock')"></div>
|
|
79
79
|
</body>
|
|
80
80
|
</html>
|
|
81
81
|
```
|
|
@@ -95,9 +95,9 @@ const app = new Elysia()
|
|
|
95
95
|
() =>
|
|
96
96
|
`<html>
|
|
97
97
|
<head>
|
|
98
|
-
<script type="module" src="https://cdn.jsdelivr.net/gh/starfederation/datastar/bundles/datastar.js"></script>
|
|
98
|
+
<script type="module" src="https://cdn.jsdelivr.net/gh/starfederation/datastar@v1.0.0-beta.1/bundles/datastar.js"></script>
|
|
99
99
|
</head>
|
|
100
|
-
<body data-on-load="
|
|
100
|
+
<body data-on-load="@get('/feed')">
|
|
101
101
|
<div id="hello">???</div>
|
|
102
102
|
</body>
|
|
103
103
|
</html>`
|
|
@@ -133,9 +133,9 @@ Bun.serve({
|
|
|
133
133
|
`<html>
|
|
134
134
|
<head>
|
|
135
135
|
<title>Example Bun</title>
|
|
136
|
-
<script type="module" src="https://cdn.jsdelivr.net/gh/starfederation/datastar/bundles/datastar.js"></script>
|
|
136
|
+
<script type="module" src="https://cdn.jsdelivr.net/gh/starfederation/datastar@v1.0.0-beta.1/bundles/datastar.js"></script>
|
|
137
137
|
</head>
|
|
138
|
-
<body data-signals="{time:''}" data-on-load="
|
|
138
|
+
<body data-signals="{time:''}" data-on-load="@get('/feed')">
|
|
139
139
|
<div data-text="time.value"></div>
|
|
140
140
|
</body>
|
|
141
141
|
</html>`,
|
package/examples/bun.example.js
CHANGED
|
@@ -11,9 +11,9 @@ Bun.serve({
|
|
|
11
11
|
`<html>
|
|
12
12
|
<head>
|
|
13
13
|
<title>Example Bun</title>
|
|
14
|
-
<script type="module" src="https://cdn.jsdelivr.net/gh/starfederation/datastar/bundles/datastar.js"></script>
|
|
14
|
+
<script type="module" src="https://cdn.jsdelivr.net/gh/starfederation/datastar@v1.0.0-beta.1/bundles/datastar.js"></script>
|
|
15
15
|
</head>
|
|
16
|
-
<body data-signals="{time:''}" data-on-load="
|
|
16
|
+
<body data-signals="{time:''}" data-on-load="@get('/feed')">
|
|
17
17
|
<div data-text="time.value"></div>
|
|
18
18
|
</body>
|
|
19
19
|
</html>`,
|
|
@@ -7,38 +7,38 @@ export const homepage = (name = "") => {
|
|
|
7
7
|
return `<html>
|
|
8
8
|
<head>
|
|
9
9
|
<title>${name} Datastar Test</title>
|
|
10
|
-
<script type="module" src="https://cdn.jsdelivr.net/gh/starfederation/datastar@
|
|
10
|
+
<script type="module" src="https://cdn.jsdelivr.net/gh/starfederation/datastar@v1.0.0-beta.1/bundles/datastar.js"></script>
|
|
11
11
|
</head>
|
|
12
12
|
<body>
|
|
13
13
|
<h3>${name} Datastar Test</h3>
|
|
14
14
|
<div data-signals="{theme: 'light', lastUpdate:'Never', xyz:'some signal'}">
|
|
15
15
|
<h3>Long Lived SSE:</h3>
|
|
16
|
-
<div id="clock" data-on-load="
|
|
16
|
+
<div id="clock" data-on-load="@get('/clock')">...Loading Clock</div>
|
|
17
17
|
|
|
18
18
|
<h3>MergeSignals:</h3>
|
|
19
19
|
<div>Last User Interaction:<span data-text="lastUpdate.value"></span></div>
|
|
20
20
|
<h3>Merge Fragments</h3>
|
|
21
21
|
<div id="quote">No Quote</div>
|
|
22
|
-
<button data-on-click="
|
|
22
|
+
<button data-on-click="@get('/quote')">MergeFragments</button>
|
|
23
23
|
<h3>RemoveFragments</h3>
|
|
24
24
|
<div id="trash">
|
|
25
25
|
Remove me please!
|
|
26
|
-
<button data-on-click="
|
|
26
|
+
<button data-on-click="@get('/removeTrash')">RemoveFragments</button>
|
|
27
27
|
</div>
|
|
28
28
|
<h3>ExecuteScript</h3>
|
|
29
29
|
<div>Print to Console</div>
|
|
30
|
-
<button data-on-click="
|
|
30
|
+
<button data-on-click="@get('/printToConsole')">ExecuteScript</button>
|
|
31
31
|
|
|
32
32
|
<h3>ReadSignals</h3>
|
|
33
|
-
<button data-on-click="
|
|
33
|
+
<button data-on-click="@get('/readSignals')">ReadSignals</button>
|
|
34
34
|
|
|
35
35
|
<h3>ReadSignals (post)</h3>
|
|
36
|
-
<button data-on-click="
|
|
36
|
+
<button data-on-click="@get('/readSignals', {method: 'post'})">ReadSignals (post)</button>
|
|
37
37
|
|
|
38
38
|
|
|
39
39
|
<h3>RemoveSignals</h3>
|
|
40
40
|
<div>Signal xyz:<span data-text="xyz.value"></span></div>
|
|
41
|
-
<button data-on-click="
|
|
41
|
+
<button data-on-click="@get('/removeSignal')">Test RemoveSignals: xyz</button>
|
|
42
42
|
</div>
|
|
43
43
|
</body>
|
|
44
44
|
</html>`;
|