datastar-ssegen 0.1.3 → 1.0.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (4) hide show
  1. package/README.md +50 -1
  2. package/examples/bun.example.js +41 -0
  3. package/index.js +14 -4
  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:
package/examples/bun.example.js ADDED
@@ -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": "nocache",
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
- this.res?.setHeader("Cache-Control", "nocache");
116
- this.res?.setHeader("Connection", "keep-alive");
117
- this.res?.setHeader("Content-Type", "text/event-stream");
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
- this.res.write(eventString);
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",
3
+ "version": "1.0.0",
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": [