penpal 7.0.0-beta.1 → 7.0.0-beta.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.
- package/README.md +10 -10
- package/package.json +2 -1
package/README.md
CHANGED
|
@@ -368,7 +368,7 @@ const initPenpal = async () => {
|
|
|
368
368
|
|
|
369
369
|
navigator.serviceWorker.controller?.postMessage(
|
|
370
370
|
{
|
|
371
|
-
type: '
|
|
371
|
+
type: 'INIT_PENPAL',
|
|
372
372
|
port: port2,
|
|
373
373
|
},
|
|
374
374
|
{
|
|
@@ -393,7 +393,7 @@ import { PortMessenger, connect } from 'penpal';
|
|
|
393
393
|
self.addEventListener('install', () => self.skipWaiting());
|
|
394
394
|
self.addEventListener('activate', () => self.clients.claim());
|
|
395
395
|
self.addEventListener('message', async (event) => {
|
|
396
|
-
if (event.data?.type
|
|
396
|
+
if (event.data?.type !== 'INIT_PENPAL') {
|
|
397
397
|
return;
|
|
398
398
|
}
|
|
399
399
|
|
|
@@ -509,7 +509,7 @@ try {
|
|
|
509
509
|
}
|
|
510
510
|
```
|
|
511
511
|
|
|
512
|
-
## Transferring Large
|
|
512
|
+
## Transferring Large Data
|
|
513
513
|
|
|
514
514
|
When sending a value between windows or workers, the browser uses a [structured clone algorithm](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm) by default to _clone_ the value as it is sent. As a result, the value will exist in memory multiple times--once for the sender and once for the recipient. This is typically fine, but some use cases require sending a large amount of data between contexts which could result in a significant performance hit.
|
|
515
515
|
|
|
@@ -564,13 +564,13 @@ const connection = connect({
|
|
|
564
564
|
});
|
|
565
565
|
```
|
|
566
566
|
|
|
567
|
-
##
|
|
567
|
+
## Parallel Connections
|
|
568
568
|
|
|
569
|
-
In fairly rare cases, you may wish to make
|
|
569
|
+
In fairly rare cases, you may wish to make parallel connections between two participants. To illustrate, let's use a scenario where you wish to make two parallel connections between Window A and Window B. In other words, you will be calling `connect()` twice within Window A and twice within Window B.
|
|
570
570
|
|
|
571
571
|
In an attempt to establish these two connections, Penpal in Window A will be calling `postMessage()` on a single window object. By default, when Penpal within Window B receives these messages, it has no way to disambiguate messages related to the first call to `connect()` from messages related to the second call to `connect()`. As a result, the connections may fail to be properly established.
|
|
572
572
|
|
|
573
|
-
To prevent this issue, Penpal provides the concept of channels. A channel is a string identifier of your choosing that you may provide when calling `connect()` within both participants. When a channel is provided, it is used to disambiguate communication between
|
|
573
|
+
To prevent this issue, Penpal provides the concept of channels. A channel is a string identifier of your choosing that you may provide when calling `connect()` within both participants. When a channel is provided, it is used to disambiguate communication between parallel connections. This is better explained in code:
|
|
574
574
|
|
|
575
575
|
### Window A
|
|
576
576
|
|
|
@@ -650,7 +650,7 @@ const connectionB = connect({
|
|
|
650
650
|
});
|
|
651
651
|
```
|
|
652
652
|
|
|
653
|
-
Although we're using `WindowMessenger` here to establish connections between two windows, channels would similarly need to be used when using `WorkerMessenger` to make
|
|
653
|
+
Although we're using `WindowMessenger` here to establish connections between two windows, channels would similarly need to be used when using `WorkerMessenger` to make parallel connections to a worker. When using `PortMessenger`, channels are only needed when establishing parallel connections over a single pair of ports.
|
|
654
654
|
|
|
655
655
|
## Errors
|
|
656
656
|
|
|
@@ -775,7 +775,7 @@ The amount of time, in milliseconds, Penpal should wait for a connection to be e
|
|
|
775
775
|
|
|
776
776
|
`channel: string` (optional)
|
|
777
777
|
|
|
778
|
-
A string identifier that disambiguates communication when establishing
|
|
778
|
+
A string identifier that disambiguates communication when establishing parallel connections between two participants (e.g., two windows, a window and a worker). See [Parallel Connections](#parallel-connections) for more information.
|
|
779
779
|
|
|
780
780
|
`log: (...args: unknown[]) => void` (optional)
|
|
781
781
|
|
|
@@ -787,7 +787,7 @@ The return value of `connect` is a `Connection` object with the following proper
|
|
|
787
787
|
|
|
788
788
|
`promise: Promise`
|
|
789
789
|
|
|
790
|
-
A promise which will be resolved once communication has been established. The promise will be resolved with an object that serves as a proxy for the methods the remote has exposed. Calling a method on this proxy object will always return a promise since it involves sending messages to and from the remote which are asynchronous operations. When calling a method on this proxy object, you may always pass an instance of `CallOptions` as a final argument. See [Method Call Timeouts](#method-call-timeouts) and [
|
|
790
|
+
A promise which will be resolved once communication has been established. The promise will be resolved with an object that serves as a proxy for the methods the remote has exposed. Calling a method on this proxy object will always return a promise since it involves sending messages to and from the remote which are asynchronous operations. When calling a method on this proxy object, you may always pass an instance of `CallOptions` as a final argument. See [Method Call Timeouts](#method-call-timeouts) and [Transferring Large Data](#transferring-large-data) for more information on `CallOptions`.
|
|
791
791
|
|
|
792
792
|
`destroy: () => void`
|
|
793
793
|
|
|
@@ -829,7 +829,7 @@ A reference to the worker. When connecting from a window, you would specify the
|
|
|
829
829
|
|
|
830
830
|
### `PortMessenger`
|
|
831
831
|
|
|
832
|
-
This messenger supports communication between
|
|
832
|
+
This messenger supports communication between a pair of [MessagePorts](https://developer.mozilla.org/en-US/docs/Web/API/MessagePort). This is particularly useful when establishing a connection with a [SharedWorker](https://developer.mozilla.org/en-US/docs/Web/API/SharedWorker) or [ServiceWorker](https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker). See [Usage with a Shared Worker](#usage-with-a-shared-worker) and [Usage with a Service Worker](#usage-with-a-service-worker) for examples.
|
|
833
833
|
|
|
834
834
|
#### Constructor Options
|
|
835
835
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "penpal",
|
|
3
|
-
"version": "7.0.0-beta.
|
|
3
|
+
"version": "7.0.0-beta.2",
|
|
4
4
|
"description": "Penpal simplifies communication with iframes, workers, windows, etc. by using promise-based methods on top of postMessage.",
|
|
5
5
|
"author": "Aaron Hardy <aaron@aaronhardy.com>",
|
|
6
6
|
"license": "MIT",
|
|
@@ -42,6 +42,7 @@
|
|
|
42
42
|
"types": "./lib/index.d.ts"
|
|
43
43
|
}
|
|
44
44
|
},
|
|
45
|
+
"types": "./lib/index.d.ts",
|
|
45
46
|
"scripts": {
|
|
46
47
|
"clean": "rimraf lib cjs dist",
|
|
47
48
|
"build:lib": "tsc --project src/tsconfig.json",
|