respondable-event 0.1.1-main.29f6ea6 → 0.1.1-main.e92dc42
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 +18 -16
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
# `respondable-event`
|
|
2
2
|
|
|
3
|
-
Enables event listeners to send
|
|
3
|
+
Enables event listeners to send response back to the event dispatcher.
|
|
4
4
|
|
|
5
5
|
## Background
|
|
6
6
|
|
|
7
7
|
Inspired by the [`FetchEvent`](https://developer.mozilla.org/en-US/docs/Web/API/FetchEvent) which is available to [Service Workers](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) only, the `RespondableEvent` allows event listeners to send a response back to the dispatching [`EventTarget`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget).
|
|
8
8
|
|
|
9
|
-
This is useful in scenarios where custom elements need to communicate with the host asynchronously or infrequently. For persisted messaging, use `RespondableEvent` to set up [
|
|
9
|
+
This is useful in scenarios where custom elements need to communicate with the host asynchronously or infrequently. For persisted messaging, use `RespondableEvent` to set up [Channel Messaging](https://developer.mozilla.org/en-US/docs/Web/API/Channel_Messaging_API/Using_channel_messaging) instead.
|
|
10
10
|
|
|
11
11
|
## How to use
|
|
12
12
|
|
|
13
|
-
The code snippet below
|
|
13
|
+
The code snippet below sends an `"authenticate"` event to the hosting page.
|
|
14
14
|
|
|
15
15
|
```ts
|
|
16
16
|
const event = new RespondableEvent(
|
|
@@ -22,19 +22,19 @@ const event = new RespondableEvent(
|
|
|
22
22
|
// No response.
|
|
23
23
|
}
|
|
24
24
|
},
|
|
25
|
-
{ bubbles: true } //
|
|
25
|
+
{ bubbles: true } // Available to the whole page.
|
|
26
26
|
);
|
|
27
27
|
|
|
28
28
|
element.dispatchEvent(event);
|
|
29
29
|
|
|
30
|
-
// If
|
|
31
|
-
// will
|
|
30
|
+
// If `respondWith()` is not called, `checkResponse()`
|
|
31
|
+
// function will callback with `undefined`.
|
|
32
32
|
event.checkResponse();
|
|
33
33
|
|
|
34
34
|
const token = await authenticate.promise;
|
|
35
35
|
```
|
|
36
36
|
|
|
37
|
-
In the hosting page, the following code snippet
|
|
37
|
+
In the hosting page, the following code snippet responds with a token.
|
|
38
38
|
|
|
39
39
|
```ts
|
|
40
40
|
window.addEventListener('authenticate', event => {
|
|
@@ -45,28 +45,30 @@ window.addEventListener('authenticate', event => {
|
|
|
45
45
|
});
|
|
46
46
|
```
|
|
47
47
|
|
|
48
|
+
The callback function passed to the constructor will be called *at most once*. Same as `FetchEvent`, the `respondWith()` function will throw if it is being called for more than once.
|
|
49
|
+
|
|
48
50
|
### New `checkResponse` function
|
|
49
51
|
|
|
50
|
-
|
|
52
|
+
To reduce code complexity, the `checkResponse()` function guarantees the `callback` function will be called exactly once. The API design is similar to the [`HTMLFormElement.checkValidity()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/checkValidity) function:
|
|
51
53
|
|
|
52
|
-
- If
|
|
53
|
-
- If
|
|
54
|
+
- If `respondWith()` was called, `checkResponse()` will return `true`.
|
|
55
|
+
- If `respondWith()` was never called, `checkResponse()` will call the `callback` function with `undefined`, and return `false`.
|
|
54
56
|
|
|
55
|
-
It is recommended to
|
|
57
|
+
It is recommended to put `checkResponse()` immediately after `dispatchEvent()`.
|
|
56
58
|
|
|
57
59
|
## Designs
|
|
58
60
|
|
|
59
61
|
### Callback function in constructor
|
|
60
62
|
|
|
61
|
-
The callback function follows the pattern found in [`MutationObserver`](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver/MutationObserver) and other
|
|
63
|
+
The callback function follows the pattern found in [`MutationObserver`](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver/MutationObserver) and other observers. It is designed to limit the number of audience who can look at the response.
|
|
62
64
|
|
|
63
65
|
## Behaviors
|
|
64
66
|
|
|
65
|
-
### Differences between `RespondableEvent` and `FetchEvent
|
|
67
|
+
### Differences between `RespondableEvent` and `FetchEvent`
|
|
66
68
|
|
|
67
|
-
- `RespondableEvent` extends from `Event
|
|
68
|
-
- `request` property is optional in `RespondableEvent` where it is required in `FetchEvent`
|
|
69
|
-
- [`checkResponse()`
|
|
69
|
+
- `RespondableEvent` extends from [`Event`](https://developer.mozilla.org/en-US/docs/Web/API/Event), where [`FetchEvent`](https://developer.mozilla.org/en-US/docs/Web/API/FetchEvent) extends from [`ExtendableEvent`](https://developer.mozilla.org/en-US/docs/Web/API/ExtendableEvent)
|
|
70
|
+
- `request` property is optional in `RespondableEvent` where it is required in [`FetchEvent`](https://developer.mozilla.org/en-US/docs/Web/API/FetchEvent/request)
|
|
71
|
+
- [`checkResponse()`](#new-checkresponse-function) function is new in `RespondableEvent`
|
|
70
72
|
|
|
71
73
|
## Contributions
|
|
72
74
|
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "respondable-event",
|
|
3
|
-
"version": "0.1.1-main.
|
|
4
|
-
"description": "Enables event listeners to send zero-or-one response back to the
|
|
3
|
+
"version": "0.1.1-main.e92dc42",
|
|
4
|
+
"description": "Enables event listeners to send zero-or-one response back to the event dispatcher.",
|
|
5
5
|
"files": [
|
|
6
6
|
"./dist/"
|
|
7
7
|
],
|
|
@@ -68,6 +68,6 @@
|
|
|
68
68
|
"typescript": "^5.6.3"
|
|
69
69
|
},
|
|
70
70
|
"dependencies": {
|
|
71
|
-
"respondable-event": "^0.1.1-main.
|
|
71
|
+
"respondable-event": "^0.1.1-main.e92dc42"
|
|
72
72
|
}
|
|
73
73
|
}
|