Gathering detailed insights and metrics for datastar-ssegen
Gathering detailed insights and metrics for datastar-ssegen
Installations
npm install datastar-ssegenDeveloper Guide
BETA
Typescript
Yes
Module System
ESM
Node Version
18.20.7
NPM Version
10.8.2
Releases
Unable to fetch releases
Languages
1
JavaScript
JavaScript (100%)
Developer
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
2 Stars
34 Commits
1 Watchers
1 Branches
1 Contributors
Updated on May 22, 2025
Maintainers
1
Package Meta Information
Latest Version
1.2.1
Package Id
datastar-ssegen@1.2.1
Unpacked Size
27.34 kB
Size
7.54 kB
File Count
12
NPM Version
10.8.2
Node Version
18.20.7
Published on
Mar 19, 2025
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dev Dependencies
6
datastar-ssegen
Overview
The datastar-ssegen is a backend JavaScript module designed to generate Server-Sent Events (SSE) for connected Datastar (v1.0.0-beta.9) clients. It supports popular server frameworks such as Express.js, Node.js, and Hyper Express.js, and Bun and Elysia.
This package is engineered to integrate tightly with request and response objects of these backend frameworks, enabling efficient and reactive web application development.
Tested with datastar v1.0.0-beta.9.
Key Features
- Real-time updates with Server-Sent Events tailored for Datastar clients
- Seamless integration with Express.js, Hyper Express.js, and Node HTTP
Installation
Install the package via npm:
1npm install datastar-ssegen
Quick Start Example with Express.js
Here's a straightforward example of setting up an Express.js server with the datastar-ssegen:
1import express from 'express'; 2import { ServerSentEventGenerator } from 'datastar-ssegen'; 3 4const app = express(); 5app.use(express.json()); 6 7app.get('/qoute', (req,res)=> { 8 const sse = ServerSentEventGenerator(req, res); 9 const qoutes = [ 10 "Any app that can be written in JavaScript, will eventually be written in JavaScript. - Jeff Atwood", 11 "JavaScript is the world's most misunderstood programming language. - Douglas Crockford", 12 "The strength of JavaScript is that you can do anything. The weakness is that you will. - Reg Braithwaite", 13 ]; 14 const randomQuote = (arr) => arr[Math.floor(Math.random() * arr.length)]; 15 await sse.MergeFragments(`<div id="quote">${randomQuote(qoutes)}</div>`); 16 await sse.MergeSignals({ lastUpdate: Date.now() }); 17 res.end(); 18}); 19app.get('/clock', (req, res)=> { 20 const sse = ServerSentEventGenerator(req, res); 21 setInterval(async () => { 22 await sse.MergeFragments(`<div id="clock">Current Time: ${new Date()}</div>`); 23 }, 1000); 24}); 25 26const PORT = 3101; 27app.listen(PORT, () => { 28 console.log(`Server running at http://localhost:${PORT}`); 29});
Client Interaction Example
Here's a simple HTML page to interact with the server:
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <script type="module" src="https://cdn.jsdelivr.net/gh/starfederation/datastar@v1.0.0-beta.1/bundles/datastar.js"></script> 8 <title>SSE Example</title> 9</head> 10<body> 11 <h1>SSE Demo</h1> 12 <div id="qoute" data-on-load="@get('/qoute')">Qoute: </div><button onclick="@get('/qoute')">Get New Qoute</button> 13 <div id="clock" data-on-load="@get('/clock')"></div> 14</body> 15</html>
Quick Start Example with Elysia
1import { Elysia } from "elysia"; 2import { html } from "@elysiajs/html"; 3import { ServerSentEventGenerator } from "datastar-ssegen"; 4 5const app = new Elysia() 6 .use(html()) 7 .get( 8 "/", 9 () => 10 `<html> 11 <head> 12 <script type="module" src="https://cdn.jsdelivr.net/gh/starfederation/datastar@v1.0.0-beta.1/bundles/datastar.js"></script> 13 </head> 14 <body data-on-load="@get('/feed')"> 15 <div id="hello">???</div> 16 </body> 17 </html>` 18 ) 19 .get("/feed", function* ({ request, set }) { 20 const sse = ServerSentEventGenerator(request); 21 set.headers = sse.headers; 22 yield sse.MergeFragments(`<div id="hello">Hello!</div>`); 23 }) 24 25 .listen(3000); 26 27console.log( 28 `🦊 Elysia is running at ${app.server?.hostname}:${app.server?.port}` 29);
Quick Start Example with Bun
Using this with Bun requires you to create the response. Below is an example of how to integrate the datastar-ssegen with a Stream:
1import { ServerSentEventGenerator } from "../index.js"; 2const PORT = 3103; 3console.log(`Bun server http://localhost:${PORT}`); 4Bun.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@v1.0.0-beta.1/bundles/datastar.js"></script> 15 </head> 16 <body data-signals="{time:''}" data-on-load="@get('/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});
Available Functions
The ServerSentEventGenerator provides several functions to facilitate communication with connected Datastar clients using Server-Sent Events:
-
ServerSentEventGenerator(request, response): Initializes SSE communication with the specified request and response. -
ReadSignals(signals): Reads and merges signals based on HTTP methods with predefined signals, useful for parsing query or body data sent to the server. -
MergeFragments(fragments, options): Sends a merge fragments event to update HTML content on the client. Options includeselector,mergeMode,settleDuration, anduseViewTransition. -
RemoveFragments(selector, options): Dispatches events to remove HTML elements based on a CSS selector. Options can set asettleDurationoruseViewTransition. -
MergeSignals(signals, options): Sends a merge signals event to update or add client-side signals. Options may includeonlyIfMissing. -
RemoveSignals(paths, options): Sends an event to remove specific client-side signals identified by paths. -
ExecuteScript(script, options): Directs the client to execute specified JavaScript code. Options can enableautoRemoveof the script after execution.
This expanded set provides comprehensive functionality to build interactive web applications with real-time updates and dynamic HTML and signal management.
No vulnerabilities found.
No security vulnerabilities found.