datastar-ssegen 1.1.0 → 1.2.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.
Files changed (8) hide show
  1. package/README.md +2 -0
  2. package/datastarVersion.js +2 -0
  3. package/examples/bun.example.js +4 -2
  4. package/examples/commonHandlers.js +4 -3
  5. package/index.js +2 -75
  6. package/jsconfig.json +1 -1
  7. package/package.json +1 -1
  8. package/types.d.ts +65 -0
package/README.md CHANGED
@@ -9,6 +9,8 @@ The `datastar-ssegen` is a backend JavaScript module designed to generate Server
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
 
12
+ Tested with datastar `v1.0.0-beta.9`.
13
+
12
14
  ### Key Features
13
15
 
14
16
  - Real-time updates with Server-Sent Events tailored for Datastar clients
package/datastarVersion.js ADDED
@@ -0,0 +1,2 @@
1
+ export const datastarVersion =
2
+ "https://cdn.jsdelivr.net/gh/starfederation/datastar@1.0.0-beta.9/bundles/datastar.js";
package/examples/bun.example.js CHANGED
@@ -1,4 +1,6 @@
1
1
  import { ServerSentEventGenerator } from "../index.js";
2
+ import { datastarVersion } from "../datastarVersion.js";
3
+
2
4
  const PORT = 3103;
3
5
  console.log(`Bun server http://localhost:${PORT}`);
4
6
  Bun.serve({
@@ -11,10 +13,10 @@ Bun.serve({
11
13
  `<html>
12
14
  <head>
13
15
  <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>
16
+ <script type="module" src="${datastarVersion}"></script>
15
17
  </head>
16
18
  <body data-signals="{time:''}" data-on-load="@get('/feed')">
17
- <div data-text="time.value"></div>
19
+ <div data-text="$time"></div>
18
20
  </body>
19
21
  </html>`,
20
22
  {
package/examples/commonHandlers.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import { ServerSentEventGenerator } from "../index.js";
2
+ import { datastarVersion } from "../datastarVersion.js";
2
3
 
3
4
  export let backendStore = {
4
5
  someBackendValue: "This is something",
@@ -7,7 +8,7 @@ export const homepage = (name = "") => {
7
8
  return `<html>
8
9
  <head>
9
10
  <title>${name} Datastar Test</title>
10
- <script type="module" src="https://cdn.jsdelivr.net/gh/starfederation/datastar@v1.0.0-beta.1/bundles/datastar.js"></script>
11
+ <script type="module" src="${datastarVersion}"></script>
11
12
  </head>
12
13
  <body>
13
14
  <h3>${name} Datastar Test</h3>
@@ -16,7 +17,7 @@ export const homepage = (name = "") => {
16
17
  <div id="clock" data-on-load="@get('/clock')">...Loading Clock</div>
17
18
 
18
19
  <h3>MergeSignals:</h3>
19
- <div>Last User Interaction:<span data-text="lastUpdate.value"></span></div>
20
+ <div>Last User Interaction:<span data-text="$lastUpdate"></span></div>
20
21
  <h3>Merge Fragments</h3>
21
22
  <div id="quote">No Quote</div>
22
23
  <button data-on-click="@get('/quote')">MergeFragments</button>
@@ -37,7 +38,7 @@ export const homepage = (name = "") => {
37
38
 
38
39
 
39
40
  <h3>RemoveSignals</h3>
40
- <div>Signal xyz:<span data-text="xyz.value"></span></div>
41
+ <div>Signal xyz:<span data-text="$xyz"></span></div>
41
42
  <button data-on-click="@get('/removeSignal')">Test RemoveSignals: xyz</button>
42
43
  </div>
43
44
  </body>
package/index.js CHANGED
@@ -2,81 +2,6 @@
2
2
  import url from "url";
3
3
  import querystring from "querystring";
4
4
 
5
- /**
6
- * @typedef {object} ServerSentEventMethods
7
- * @property {Function} _send - Sends a server-sent event.
8
- * @property {Function} ReadSignals - Reads signals based on HTTP methods and merges them with predefined signals.
9
- * @property {Function} MergeFragments - Sends a merge fragments event with specified options.
10
- * @property {Function} RemoveFragments - Sends a remove fragments event.
11
- * @property {Function} MergeSignals - Sends a merge signals event, with merging options.
12
- * @property {Function} RemoveSignals - Sends a remove signals event, requires signal paths.
13
- * @property {Function} ExecuteScript - Executes a defined script on the client-side.
14
- */
15
-
16
- /**
17
- * @typedef {object} SendOptions
18
- * @property {number|null} [eventId] - The ID of the event.
19
- * @property {number|null} [retryDuration] - Duration in milliseconds to wait before attempting a retry.
20
- */
21
-
22
- /**
23
- * @typedef {object} MergeFragmentsOptions
24
- * @property {string|null} [selector] - CSS selector to scope the merge action.
25
- * @property {string} [mergeMode=morph] - Mode to use for merging fragments.
26
- * @property {number} [settleDuration=300] - Duration for settling the merge.
27
- * @property {boolean|null} [useViewTransition] - Use CSS view transitions if supported.
28
- * @property {number|null} [eventId] - Event ID for the merge fragments event.
29
- * @property {number|null} [retryDuration] - Retry duration for the event.
30
- */
31
-
32
- /**
33
- * @typedef {object} RemoveFragmentsOptions
34
- * @property {number} [settleDuration] - Duration for settling the removal.
35
- * @property {boolean|null} [useViewTransition] - Use CSS view transitions if supported.
36
- * @property {number|null} [eventId] - Event ID for the remove fragments event.
37
- * @property {number|null} [retryDuration] - Retry duration for the event.
38
- */
39
-
40
- /**
41
- * @typedef {object} MergeSignalsOptions
42
- * @property {boolean} [onlyIfMissing=false] - Merge only if the signal is missing.
43
- * @property {number|null} [eventId] - Event ID for the merge signals event.
44
- * @property {number|null} [retryDuration] - Retry duration for the event.
45
- */
46
-
47
- /**
48
- * @typedef {object} ExecuteScriptOptions
49
- * @property {boolean|null} [autoRemove] - Automatically remove the script after execution.
50
- * @property {number|null} [eventId] - Event ID for the execute script event.
51
- * @property {number|null} [retryDuration] - Retry duration for the event.
52
- */
53
-
54
- /**
55
- * @typedef {Object} HttpRequest
56
- * @property {string} method - The HTTP method, e.g., 'GET', 'POST', etc.
57
- * @property {string} url - The URL of the request.
58
- * @property {Object.<string, string>} headers - The HTTP headers.
59
- * @property {Object} [body] - The payload of the request.
60
- * @property {Function} [json] - Parses the request body
61
- * @property {Function} [on] - Adds event handlers to the request
62
- */
63
-
64
- /**
65
- * @typedef {Object} HttpResponse
66
- * @property {number} statusCode - The HTTP status code, e.g., 200, 404, etc.
67
- * @property {Object.<string, string>} headers - The HTTP headers.
68
- * @property {Object|string} [body] - The response body.
69
- * @property {Function} setHeader - Sets a header on the response
70
- * @property {Function} write - Writes to the response body
71
- */
72
-
73
- /**
74
- * Initializes the server-sent event generator.
75
- *
76
- * @param {HttpRequest} request - The request object.
77
- * @param {HttpResponse} response - The response object.
78
- * @returns {ServerSentEventMethods} Methods for manipulating server-sent events.
79
- */
80
5
  export function ServerSentEventGenerator(request, response) {
81
6
  const generatorMethods = {
82
7
  headersSent: false,
@@ -193,6 +118,8 @@ export function ServerSentEventGenerator(request, response) {
193
118
  let dataLines = [];
194
119
  if (options?.selector != null)
195
120
  dataLines.push(`selector ${options.selector}`);
121
+ if (options?.mergeMode != null)
122
+ dataLines.push(`mergeMode ${options.mergeMode}`);
196
123
  if (options?.settleDuration != null)
197
124
  dataLines.push(`settleDuration ${options.settleDuration}`);
198
125
  if (options?.useViewTransition != null)
package/jsconfig.json CHANGED
@@ -17,6 +17,6 @@
17
17
  "moduleResolution": "node",
18
18
  "outDir": "dist"
19
19
  },
20
- "include": ["*.js"],
20
+ "include": ["*.js", "*.ts"],
21
21
  "verbose": true
22
22
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "datastar-ssegen",
3
- "version": "1.1.0",
3
+ "version": "1.2.0",
4
4
  "description": "Datastar Server-Sent Event generator",
5
5
  "author": "John Cudd",
6
6
  "type": "module",
package/types.d.ts ADDED
@@ -0,0 +1,65 @@
1
+ type HttpRequest = {
2
+ method: string;
3
+ url: string;
4
+ headers: Record<string, string>;
5
+ body?: any;
6
+ json?: Function;
7
+ on?: Function;
8
+ };
9
+
10
+ type HttpResponse = {
11
+ statusCode: number;
12
+ headers: Record<string, string>;
13
+ body?: Record<string, string> | string;
14
+ setHeader: Function;
15
+ write: Function;
16
+ };
17
+
18
+ type SendOptions = {
19
+ eventId?: number | null;
20
+ retryDuration?: number | null;
21
+ };
22
+
23
+ type MergeFragmentsOptions = {
24
+ selector?: string | null;
25
+ mergeMode?: string;
26
+ settleDuration?: number;
27
+ useViewTransition?: boolean | null;
28
+ eventId?: number | null;
29
+ retryDuration?: number | null;
30
+ };
31
+
32
+ type RemoveFragmentsOptions = {
33
+ settleDuration?: number;
34
+ useViewTransition?: boolean | null;
35
+ eventId?: number | null;
36
+ retryDuration?: number | null;
37
+ };
38
+
39
+ type MergeSignalsOptions = {
40
+ onlyIfMissing?: boolean;
41
+ eventId?: number | null;
42
+ retryDuration?: number | null;
43
+ };
44
+
45
+ type ExecuteScriptOptions = {
46
+ autoRemove?: boolean | null;
47
+ eventId?: number | null;
48
+ retryDuration?: number | null;
49
+ };
50
+
51
+ type ServerSentEventMethods = {
52
+ _send: Function;
53
+ ReadSignals: (signals: object) => Promise<object>;
54
+ MergeFragments: (
55
+ fragments: string[] | string,
56
+ options: MergeFragmentsOptions
57
+ ) => string;
58
+ RemoveFragments: (
59
+ selector: string,
60
+ options: RemoveFragmentsOptions
61
+ ) => string;
62
+ MergeSignals: (signals: object, options: MergeSignalsOptions) => string;
63
+ RemoveSignals: (paths: string[], options: SendOptions) => string;
64
+ ExecuteScript: (script: string, options: ExecuteScriptOptions) => string;
65
+ };