datastar-ssegen 0.0.1 → 0.0.2

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.
Files changed (2) hide show
  1. package/README.md +20 -6
  2. package/package.json +6 -2
package/README.md CHANGED
@@ -33,10 +33,24 @@ import { ServerSentEventGenerator } from 'datastar-ssegen';
33
33
  const app = express();
34
34
  app.use(express.json());
35
35
 
36
- // Define event handlers here
37
-
38
- app.get('/messages', handleMessages);
39
- app.get('/clock', handleClock);
36
+ app.get('/qoute', (req,res)=> {
37
+ const sse = ServerSentEventGenerator.init(req, res);
38
+ const qoutes = [
39
+ "Any app that can be written in JavaScript, will eventually be written in JavaScript. - Jeff Atwood",
40
+ "JavaScript is the world's most misunderstood programming language. - Douglas Crockford",
41
+ "The strength of JavaScript is that you can do anything. The weakness is that you will. - Reg Braithwaite",
42
+ ];
43
+ const randomQuote = (arr) => arr[Math.floor(Math.random() * arr.length)];
44
+ await sse.MergeFragments(`<div id="quote">${randomQuote(qoutes)}</div>`);
45
+ await sse.MergeSignals({ lastUpdate: Date.now() });
46
+ res.end();
47
+ });
48
+ app.get('/clock', (req, res)=> {
49
+ const sse = ServerSentEventGenerator.init(req, res);
50
+ setInterval(async () => {
51
+ await sse.MergeFragments(`<div id="clock">Current Time: ${new Date()}</div>`);
52
+ }, 1000);
53
+ });
40
54
 
41
55
  const PORT = 3101;
42
56
  app.listen(PORT, () => {
@@ -60,8 +74,8 @@ Here's a simple HTML page to interact with the server:
60
74
  </head>
61
75
  <body>
62
76
  <h1>SSE Demo</h1>
63
- <div id="greeting-area">Greeting: <button onclick="sse('/messages')">Get Greeting</button></div>
64
- <div id="clock-area">Current Time: <button onclick="sse('/clock')">Start Clock</button></div>
77
+ <div id="qoute" data-on-load="sse('/qoute')">Qoute: </div><button onclick="sse('/qoute')">Get New Qoute</button>
78
+ <div id="clock" data-on-load="sse('/clock')"></div>
65
79
  </body>
66
80
  </html>
67
81
  ```
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "datastar-ssegen",
3
- "version": "0.0.1",
3
+ "version": "0.0.2",
4
4
  "description": "Datastar Server-Sent Event generator",
5
5
  "author": "John Cudd",
6
6
  "type": "module",
@@ -11,7 +11,11 @@
11
11
  "express": "nodemon examples/express.example.js",
12
12
  "hyper-express": "nodemon examples/hyper-express.example.js"
13
13
  },
14
- "keywords": ["datastar", "hypermedia", "sse"],
14
+ "keywords": [
15
+ "datastar",
16
+ "hypermedia",
17
+ "sse"
18
+ ],
15
19
  "license": "mit",
16
20
  "homepage": "https://github.com/jmcudd/datastar-ssegen#readme",
17
21
  "repository": {