@device-portal/react 0.0.22 → 0.0.23
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 +11 -0
- package/dist/_virtual/_rollupPluginBabelHelpers.js +49 -1
- package/dist/_virtual/_rollupPluginBabelHelpers.js.map +1 -1
- package/dist/provider/useDevicePortalProvider.d.ts +2 -2
- package/dist/provider/useDevicePortalProvider.js +25 -10
- package/dist/provider/useDevicePortalProvider.js.map +1 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -81,6 +81,17 @@ const ConsumerComponent = () => {
|
|
|
81
81
|
}
|
|
82
82
|
```
|
|
83
83
|
|
|
84
|
+
### Per-peer Values
|
|
85
|
+
|
|
86
|
+
Instead of broadcasting the same value to all consumers, you can pass a function that returns a different value for each peer:
|
|
87
|
+
|
|
88
|
+
```jsx
|
|
89
|
+
useDevicePortalProvider('my-test-room', {
|
|
90
|
+
value: (peerId) => JSON.stringify({ peerId, timestamp: Date.now() }),
|
|
91
|
+
webSocketSignalingServer: 'wss://device-portal.filipchalupa.cz',
|
|
92
|
+
})
|
|
93
|
+
```
|
|
94
|
+
|
|
84
95
|
### Two-way Communication
|
|
85
96
|
|
|
86
97
|
You can also send messages from the `Consumer` back to the `Provider`.
|
|
@@ -6,6 +6,54 @@ function _arrayLikeToArray(r, a) {
|
|
|
6
6
|
function _arrayWithHoles(r) {
|
|
7
7
|
if (Array.isArray(r)) return r;
|
|
8
8
|
}
|
|
9
|
+
function _createForOfIteratorHelper(r, e) {
|
|
10
|
+
var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
|
|
11
|
+
if (!t) {
|
|
12
|
+
if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e) {
|
|
13
|
+
t && (r = t);
|
|
14
|
+
var n = 0,
|
|
15
|
+
F = function () {};
|
|
16
|
+
return {
|
|
17
|
+
s: F,
|
|
18
|
+
n: function () {
|
|
19
|
+
return n >= r.length ? {
|
|
20
|
+
done: true
|
|
21
|
+
} : {
|
|
22
|
+
done: false,
|
|
23
|
+
value: r[n++]
|
|
24
|
+
};
|
|
25
|
+
},
|
|
26
|
+
e: function (r) {
|
|
27
|
+
throw r;
|
|
28
|
+
},
|
|
29
|
+
f: F
|
|
30
|
+
};
|
|
31
|
+
}
|
|
32
|
+
throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
|
33
|
+
}
|
|
34
|
+
var o,
|
|
35
|
+
a = true,
|
|
36
|
+
u = false;
|
|
37
|
+
return {
|
|
38
|
+
s: function () {
|
|
39
|
+
t = t.call(r);
|
|
40
|
+
},
|
|
41
|
+
n: function () {
|
|
42
|
+
var r = t.next();
|
|
43
|
+
return a = r.done, r;
|
|
44
|
+
},
|
|
45
|
+
e: function (r) {
|
|
46
|
+
u = true, o = r;
|
|
47
|
+
},
|
|
48
|
+
f: function () {
|
|
49
|
+
try {
|
|
50
|
+
a || null == t.return || t.return();
|
|
51
|
+
} finally {
|
|
52
|
+
if (u) throw o;
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
};
|
|
56
|
+
}
|
|
9
57
|
function _iterableToArrayLimit(r, l) {
|
|
10
58
|
var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
|
|
11
59
|
if (null != t) {
|
|
@@ -64,5 +112,5 @@ function _unsupportedIterableToArray(r, a) {
|
|
|
64
112
|
}
|
|
65
113
|
}
|
|
66
114
|
|
|
67
|
-
export { _arrayLikeToArray as arrayLikeToArray, _arrayWithHoles as arrayWithHoles, _iterableToArrayLimit as iterableToArrayLimit, _nonIterableRest as nonIterableRest, _objectWithoutProperties as objectWithoutProperties, _objectWithoutPropertiesLoose as objectWithoutPropertiesLoose, _slicedToArray as slicedToArray, _unsupportedIterableToArray as unsupportedIterableToArray };
|
|
115
|
+
export { _arrayLikeToArray as arrayLikeToArray, _arrayWithHoles as arrayWithHoles, _createForOfIteratorHelper as createForOfIteratorHelper, _iterableToArrayLimit as iterableToArrayLimit, _nonIterableRest as nonIterableRest, _objectWithoutProperties as objectWithoutProperties, _objectWithoutPropertiesLoose as objectWithoutPropertiesLoose, _slicedToArray as slicedToArray, _unsupportedIterableToArray as unsupportedIterableToArray };
|
|
68
116
|
//# sourceMappingURL=_rollupPluginBabelHelpers.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"_rollupPluginBabelHelpers.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"_rollupPluginBabelHelpers.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -3,8 +3,8 @@ import { Host, type BrowserDirectOption, type PeerId } from '@device-portal/clie
|
|
|
3
3
|
* Configuration options for the Device Portal Provider.
|
|
4
4
|
*/
|
|
5
5
|
export type DevicePortalProviderOptions = {
|
|
6
|
-
/** The value to share with
|
|
7
|
-
value?: string;
|
|
6
|
+
/** The value to share with connected consumers. A function receives the peerId and can return a per-peer value. */
|
|
7
|
+
value?: string | ((peerId: PeerId) => string);
|
|
8
8
|
/** URL of the signaling server, or null to disable. */
|
|
9
9
|
webSocketSignalingServer?: string | null;
|
|
10
10
|
/** Callback when a consumer sends a message back to the provider. */
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { slicedToArray as _slicedToArray } from '../_virtual/_rollupPluginBabelHelpers.js';
|
|
1
|
+
import { slicedToArray as _slicedToArray, createForOfIteratorHelper as _createForOfIteratorHelper } from '../_virtual/_rollupPluginBabelHelpers.js';
|
|
2
2
|
import { generatePeerId, Host } from '@device-portal/client';
|
|
3
3
|
import { useState, useRef, useEffect } from 'react';
|
|
4
4
|
|
|
@@ -24,8 +24,9 @@ var useDevicePortalProvider = function useDevicePortalProvider(room) {
|
|
|
24
24
|
onMessageFromConsumerRef.current = options.onMessageFromConsumer;
|
|
25
25
|
// Stable peer ID that survives React Strict Mode unmount/remount cycles
|
|
26
26
|
var peerIdRef = useRef(generatePeerId());
|
|
27
|
-
var lastSentValueRef = useRef(undefined);
|
|
28
27
|
var sendLastValueOnConnectAndReconnect = (_options$sendLastValu = options.sendLastValueOnConnectAndReconnect) !== null && _options$sendLastValu !== void 0 ? _options$sendLastValu : true;
|
|
28
|
+
var valueRef = useRef(options.value);
|
|
29
|
+
valueRef.current = options.value;
|
|
29
30
|
useEffect(function () {
|
|
30
31
|
var newProvider = new Host(room, {
|
|
31
32
|
onMessage: function onMessage(value, peerId) {
|
|
@@ -35,10 +36,11 @@ var useDevicePortalProvider = function useDevicePortalProvider(room) {
|
|
|
35
36
|
onPeersChange: function onPeersChange(peers_0) {
|
|
36
37
|
setPeers(peers_0);
|
|
37
38
|
},
|
|
38
|
-
onPeerConnected: function onPeerConnected() {
|
|
39
|
-
if (sendLastValueOnConnectAndReconnect
|
|
40
|
-
|
|
41
|
-
|
|
39
|
+
onPeerConnected: function onPeerConnected(peerId_0) {
|
|
40
|
+
if (!sendLastValueOnConnectAndReconnect) return;
|
|
41
|
+
var v = valueRef.current;
|
|
42
|
+
if (v === undefined) return;
|
|
43
|
+
newProvider.sendToPeer(peerId_0, typeof v === 'function' ? v(peerId_0) : v);
|
|
42
44
|
},
|
|
43
45
|
webSocketSignalingServer: options.webSocketSignalingServer,
|
|
44
46
|
maxClients: options.maxClients,
|
|
@@ -54,11 +56,24 @@ var useDevicePortalProvider = function useDevicePortalProvider(room) {
|
|
|
54
56
|
};
|
|
55
57
|
}, [room, sendLastValueOnConnectAndReconnect, options.webSocketSignalingServer, options.maxClients, options.browserDirect]);
|
|
56
58
|
useEffect(function () {
|
|
57
|
-
if (options.value === undefined)
|
|
58
|
-
|
|
59
|
+
if (options.value === undefined || !provider) return;
|
|
60
|
+
if (typeof options.value === 'function') {
|
|
61
|
+
var fn = options.value;
|
|
62
|
+
var _iterator = _createForOfIteratorHelper(provider.peers),
|
|
63
|
+
_step;
|
|
64
|
+
try {
|
|
65
|
+
for (_iterator.s(); !(_step = _iterator.n()).done;) {
|
|
66
|
+
var peerId_1 = _step.value;
|
|
67
|
+
provider.sendToPeer(peerId_1, fn(peerId_1));
|
|
68
|
+
}
|
|
69
|
+
} catch (err) {
|
|
70
|
+
_iterator.e(err);
|
|
71
|
+
} finally {
|
|
72
|
+
_iterator.f();
|
|
73
|
+
}
|
|
74
|
+
} else {
|
|
75
|
+
provider.send(options.value);
|
|
59
76
|
}
|
|
60
|
-
lastSentValueRef.current = options.value;
|
|
61
|
-
provider === null || provider === void 0 || provider.send(options.value);
|
|
62
77
|
}, [options.value, provider]);
|
|
63
78
|
return {
|
|
64
79
|
peers: peers,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useDevicePortalProvider.js","sources":["../../src/provider/useDevicePortalProvider.ts"],"sourcesContent":["import {\n\tHost,\n\tgeneratePeerId,\n\ttype BrowserDirectOption,\n\ttype PeerId,\n} from '@device-portal/client'\nimport { useEffect, useRef, useState } from 'react'\n\n// @TODO: warn if one room is used by multiple useDevicePortalProvider hooks more than once at the same time\n\n/**\n * Configuration options for the Device Portal Provider.\n */\nexport type DevicePortalProviderOptions = {\n\t/** The value to share with
|
|
1
|
+
{"version":3,"file":"useDevicePortalProvider.js","sources":["../../src/provider/useDevicePortalProvider.ts"],"sourcesContent":["import {\n\tHost,\n\tgeneratePeerId,\n\ttype BrowserDirectOption,\n\ttype PeerId,\n} from '@device-portal/client'\nimport { useEffect, useRef, useState } from 'react'\n\n// @TODO: warn if one room is used by multiple useDevicePortalProvider hooks more than once at the same time\n\n/**\n * Configuration options for the Device Portal Provider.\n */\nexport type DevicePortalProviderOptions = {\n\t/** The value to share with connected consumers. A function receives the peerId and can return a per-peer value. */\n\tvalue?: string | ((peerId: PeerId) => string)\n\t/** URL of the signaling server, or null to disable. */\n\twebSocketSignalingServer?: string | null\n\t/** Callback when a consumer sends a message back to the provider. */\n\tonMessageFromConsumer?: (value: string, peerId: PeerId) => void\n\t/** Whether to automatically send the last 'value' to new consumers. Default: true. */\n\tsendLastValueOnConnectAndReconnect?: boolean\n\t/** Maximum number of concurrent consumer connections. Default: 1. */\n\tmaxClients?: number\n\t/** Browser direct signaling options. */\n\tbrowserDirect?: BrowserDirectOption\n}\n\n/**\n * A React hook that creates a Device Portal room and shares a value with all joining consumers.\n *\n * @param room - The unique room ID.\n * @param options - Provider configuration options.\n * @returns An object containing the list of connected peers and the underlying Provider instance.\n */\nexport const useDevicePortalProvider = (\n\troom: string,\n\toptions: DevicePortalProviderOptions = {},\n) => {\n\tconst [provider, setProvider] = useState<Host | null>(null)\n\tconst [peers, setPeers] = useState<PeerId[]>([])\n\tconst onMessageFromConsumerRef = useRef(options.onMessageFromConsumer)\n\tonMessageFromConsumerRef.current = options.onMessageFromConsumer\n\t// Stable peer ID that survives React Strict Mode unmount/remount cycles\n\tconst peerIdRef = useRef<PeerId>(generatePeerId())\n\tconst sendLastValueOnConnectAndReconnect =\n\t\toptions.sendLastValueOnConnectAndReconnect ?? true\n\n\tconst valueRef = useRef(options.value)\n\tvalueRef.current = options.value\n\n\tuseEffect(() => {\n\t\tconst newProvider = new Host(room, {\n\t\t\tonMessage: (value, peerId) => {\n\t\t\t\tonMessageFromConsumerRef.current?.(value, peerId)\n\t\t\t},\n\t\t\tonPeersChange: (peers) => {\n\t\t\t\tsetPeers(peers)\n\t\t\t},\n\t\t\tonPeerConnected: (peerId) => {\n\t\t\t\tif (!sendLastValueOnConnectAndReconnect) return\n\t\t\t\tconst v = valueRef.current\n\t\t\t\tif (v === undefined) return\n\t\t\t\tnewProvider.sendToPeer(peerId, typeof v === 'function' ? v(peerId) : v)\n\t\t\t},\n\t\t\twebSocketSignalingServer: options.webSocketSignalingServer,\n\t\t\tmaxClients: options.maxClients,\n\t\t\tbrowserDirect: options.browserDirect,\n\t\t\tpeerId: peerIdRef.current,\n\t\t})\n\t\tsetProvider(newProvider)\n\t\tsetPeers(newProvider.peers)\n\n\t\treturn () => {\n\t\t\tnewProvider.destroy()\n\t\t\tsetProvider(null)\n\t\t\tsetPeers([])\n\t\t}\n\t}, [\n\t\troom,\n\t\tsendLastValueOnConnectAndReconnect,\n\t\toptions.webSocketSignalingServer,\n\t\toptions.maxClients,\n\t\toptions.browserDirect,\n\t])\n\n\tuseEffect(() => {\n\t\tif (options.value === undefined || !provider) return\n\t\tif (typeof options.value === 'function') {\n\t\t\tconst fn = options.value\n\t\t\tfor (const peerId of provider.peers) {\n\t\t\t\tprovider.sendToPeer(peerId, fn(peerId))\n\t\t\t}\n\t\t} else {\n\t\t\tprovider.send(options.value)\n\t\t}\n\t}, [options.value, provider])\n\n\treturn { peers, provider }\n}\n"],"names":["useDevicePortalProvider","room","_options$sendLastValu","options","arguments","length","undefined","_useState","useState","_useState2","_slicedToArray","provider","setProvider","_useState3","_useState4","peers","setPeers","onMessageFromConsumerRef","useRef","onMessageFromConsumer","current","peerIdRef","generatePeerId","sendLastValueOnConnectAndReconnect","valueRef","value","useEffect","newProvider","Host","onMessage","peerId","_onMessageFromConsume","call","onPeersChange","onPeerConnected","v","sendToPeer","webSocketSignalingServer","maxClients","browserDirect","destroy","fn","_iterator","_createForOfIteratorHelper","_step","s","n","done","err","e","f","send"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@device-portal/react",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.23",
|
|
4
4
|
"description": "Simple WebRTC data channel for React.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
"react": ">=19"
|
|
40
40
|
},
|
|
41
41
|
"dependencies": {
|
|
42
|
-
"@device-portal/client": "^0.0.
|
|
42
|
+
"@device-portal/client": "^0.0.23"
|
|
43
43
|
},
|
|
44
44
|
"devDependencies": {
|
|
45
45
|
"@babel/core": "^7.24.0",
|