datastar-ssegen 1.0.2 → 1.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- 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>`;
|