datastar-ssegen 0.1.3 → 1.0.1
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 +50 -1
- package/examples/bun.example.js +41 -0
- package/index.js +14 -4
- package/package.json +3 -2
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.
|
|
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.
|
|
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
|
|
|
@@ -80,6 +80,55 @@ Here's a simple HTML page to interact with the server:
|
|
|
80
80
|
</html>
|
|
81
81
|
```
|
|
82
82
|
|
|
83
|
+
|
|
84
|
+
### Quick Start Example with Bun
|
|
85
|
+
|
|
86
|
+
Using this with Bun requires you to create the response. Below is an example of how to integrate the datastar-ssegen with a Stream.:
|
|
87
|
+
|
|
88
|
+
```javascript
|
|
89
|
+
import { ServerSentEventGenerator } from "../index.js";
|
|
90
|
+
const PORT = 3103;
|
|
91
|
+
console.log(`Bun server http://localhost:${PORT}`);
|
|
92
|
+
Bun.serve({
|
|
93
|
+
port: PORT,
|
|
94
|
+
hostname: "0.0.0.0",
|
|
95
|
+
fetch(req) {
|
|
96
|
+
const url = new URL(req.url);
|
|
97
|
+
if (url.pathname === "/") {
|
|
98
|
+
return new Response(
|
|
99
|
+
`<html>
|
|
100
|
+
<head>
|
|
101
|
+
<title>Example Bun</title>
|
|
102
|
+
<script type="module" src="https://cdn.jsdelivr.net/gh/starfederation/datastar/bundles/datastar.js"></script>
|
|
103
|
+
</head>
|
|
104
|
+
<body data-signals="{time:''}" data-on-load="sse('/feed')">
|
|
105
|
+
<div data-text="time.value"></div>
|
|
106
|
+
</body>
|
|
107
|
+
</html>`,
|
|
108
|
+
{
|
|
109
|
+
headers: {
|
|
110
|
+
"Content-Type": "text/html",
|
|
111
|
+
},
|
|
112
|
+
}
|
|
113
|
+
);
|
|
114
|
+
}
|
|
115
|
+
if (url.pathname === "/feed") {
|
|
116
|
+
const sse = ServerSentEventGenerator(req);
|
|
117
|
+
const stream = new ReadableStream({
|
|
118
|
+
start(controller) {
|
|
119
|
+
setInterval(() => {
|
|
120
|
+
controller.enqueue(sse.MergeSignals({ time: new Date() }));
|
|
121
|
+
}, 1000);
|
|
122
|
+
//controller.close();
|
|
123
|
+
},
|
|
124
|
+
});
|
|
125
|
+
return new Response(stream, sse.headers);
|
|
126
|
+
}
|
|
127
|
+
return new Response("404!");
|
|
128
|
+
},
|
|
129
|
+
});
|
|
130
|
+
```
|
|
131
|
+
|
|
83
132
|
### Available Functions
|
|
84
133
|
|
|
85
134
|
The `ServerSentEventGenerator` provides several functions to facilitate communication with connected Datastar clients using Server-Sent Events:
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import { ServerSentEventGenerator } from "../index.js";
|
|
2
|
+
const PORT = 3103;
|
|
3
|
+
console.log(`Bun server http://localhost:${PORT}`);
|
|
4
|
+
Bun.serve({
|
|
5
|
+
port: PORT,
|
|
6
|
+
hostname: "0.0.0.0",
|
|
7
|
+
fetch(req) {
|
|
8
|
+
const url = new URL(req.url);
|
|
9
|
+
if (url.pathname === "/") {
|
|
10
|
+
return new Response(
|
|
11
|
+
`<html>
|
|
12
|
+
<head>
|
|
13
|
+
<title>Example Bun</title>
|
|
14
|
+
<script type="module" src="https://cdn.jsdelivr.net/gh/starfederation/datastar/bundles/datastar.js"></script>
|
|
15
|
+
</head>
|
|
16
|
+
<body data-signals="{time:''}" data-on-load="sse('/feed')">
|
|
17
|
+
<div data-text="time.value"></div>
|
|
18
|
+
</body>
|
|
19
|
+
</html>`,
|
|
20
|
+
{
|
|
21
|
+
headers: {
|
|
22
|
+
"Content-Type": "text/html",
|
|
23
|
+
},
|
|
24
|
+
}
|
|
25
|
+
);
|
|
26
|
+
}
|
|
27
|
+
if (url.pathname === "/feed") {
|
|
28
|
+
const sse = ServerSentEventGenerator(req);
|
|
29
|
+
const stream = new ReadableStream({
|
|
30
|
+
start(controller) {
|
|
31
|
+
setInterval(() => {
|
|
32
|
+
controller.enqueue(sse.MergeSignals({ time: new Date() }));
|
|
33
|
+
}, 1000);
|
|
34
|
+
//controller.close();
|
|
35
|
+
},
|
|
36
|
+
});
|
|
37
|
+
return new Response(stream, sse.headers);
|
|
38
|
+
}
|
|
39
|
+
return new Response("404!");
|
|
40
|
+
},
|
|
41
|
+
});
|
package/index.js
CHANGED
|
@@ -80,6 +80,11 @@ import querystring from "querystring";
|
|
|
80
80
|
export function ServerSentEventGenerator(request, response) {
|
|
81
81
|
const generatorMethods = {
|
|
82
82
|
headersSent: false,
|
|
83
|
+
headers: {
|
|
84
|
+
"Cache-Control": "no-cache",
|
|
85
|
+
Connnection: "keep-alive",
|
|
86
|
+
"Content-Type": "text/event-stream",
|
|
87
|
+
},
|
|
83
88
|
req: request,
|
|
84
89
|
res: response,
|
|
85
90
|
/**
|
|
@@ -112,12 +117,17 @@ export function ServerSentEventGenerator(request, response) {
|
|
|
112
117
|
|
|
113
118
|
//Send Event
|
|
114
119
|
if (!this.headersSent) {
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
120
|
+
if (!process?.isBun) {
|
|
121
|
+
Object.keys(this.headers).forEach((key) => {
|
|
122
|
+
this.res?.setHeader(key, this.headers[key]);
|
|
123
|
+
});
|
|
124
|
+
}
|
|
118
125
|
this.headersSent = true;
|
|
119
126
|
}
|
|
120
|
-
|
|
127
|
+
|
|
128
|
+
if (this.res?.write) {
|
|
129
|
+
this.res.write(eventString);
|
|
130
|
+
}
|
|
121
131
|
|
|
122
132
|
return eventString;
|
|
123
133
|
},
|
package/package.json
CHANGED
|
@@ -1,16 +1,17 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "datastar-ssegen",
|
|
3
|
-
"version": "0.1
|
|
3
|
+
"version": "1.0.1",
|
|
4
4
|
"description": "Datastar Server-Sent Event generator",
|
|
5
5
|
"author": "John Cudd",
|
|
6
6
|
"type": "module",
|
|
7
7
|
"main": "index.js",
|
|
8
8
|
"types": "index.d.ts",
|
|
9
9
|
"scripts": {
|
|
10
|
-
"dev": "concurrently -c \"red,green,blue\" -n \"node,express,hyper-express\" \"npm run node\" \"npm run express\" \"npm run hyper-express\"",
|
|
10
|
+
"dev": "concurrently -c \"red,green,blue,cyan\" -n \"node,express,hyper-express,bun\" \"npm run node\" \"npm run express\" \"npm run hyper-express\" \"npm run bun\"",
|
|
11
11
|
"node": "nodemon examples/node.example.js",
|
|
12
12
|
"express": "nodemon examples/express.example.js",
|
|
13
13
|
"hyper-express": "nodemon examples/hyper-express.example.js",
|
|
14
|
+
"bun": "bun examples/bun.example.js",
|
|
14
15
|
"check-types": "tsc --project ./jsconfig.json"
|
|
15
16
|
},
|
|
16
17
|
"keywords": [
|