@device-portal/react 0.0.23 → 0.1.1

package/README.md

@@ -168,6 +168,30 @@ const ConsumerComponent = () => {
 
 The WebRTC connection is designed to be resilient. If the connection to the signaling server is temporarily lost, any established peer-to-peer connections will remain active. The client will attempt to reconnect to the signaling server in the background to handle any future connection negotiations.
 
+### Connection Status
+
+`useDevicePortalConsumer` exposes a `connectionStatus` field so the UI can react when the peer link drops:
+
+```jsx
+const ConsumerComponent = () => {
+	const { value, connectionStatus } = useDevicePortalConsumer('my-test-room')
+
+	return (
+		<>
+			<p>Value from provider: {value}</p>
+			{connectionStatus === 'reconnecting' && <p>Reconnecting to provider…</p>}
+		</>
+	)
+}
+```
+
+The status is one of:
+
+- `'connected'` — the peer link is up.
+- `'reconnecting'` — the peer link dropped (peer left, ICE failed); the consumer is retrying in the background. The last received `value` is kept.
+
+`'connecting'` is intentionally not exposed: the hook suspends until the first value arrives, so by the time your component renders the consumer was already connected at least once.
+
 ### Browser Direct Communication
 
 When peers are in the same browser (different tabs or same tab), the library automatically uses direct browser APIs for communication instead of WebRTC. This results in a near-instant connection and works offline.

package/dist/consumer/useDevicePortalConsumer.d.ts

@@ -10,6 +10,16 @@ export type DevicePortalConsumerOptions = {
     /** Whether to automatically send the last 'send()' value back to the provider on reconnect. Default: false. */
     sendLastMessageOnReconnect?: boolean;
 };
+/**
+ * Connection state reported by {@link useDevicePortalConsumer}.
+ *
+ * The hook suspends until the first value arrives, so `'connecting'` is never
+ * observed — by the time the component renders, the consumer was at least once
+ * connected. After that, the status flips to `'reconnecting'` whenever the
+ * peer link drops (peer left, ICE failure) and back to `'connected'` once the
+ * link is re-established.
+ */
+type ConnectionStatus = 'connected' | 'reconnecting';
 /**
  * A React hook that joins a Device Portal room and receives values from the
  * provider.  **Suspends** the component until the first value is received —
@@ -23,8 +33,18 @@ export type DevicePortalConsumerOptions = {
  *
  * @param room - The unique room ID.
  * @param options - Consumer configuration options.
+ * @returns An object with:
+ *   - `value`: the latest value pushed by the provider. After Suspense
+ *     resolves, this never goes "stale" to `undefined` — if the peer link
+ *     drops, the last received value is retained.
+ *   - `connectionStatus`: `'connected'` or `'reconnecting'`. Use this to
+ *     render a banner / indicator when the peer link is temporarily down.
+ *     The hook keeps trying to reconnect in the background.
+ *   - `sendMessageToProvider`: send a message back to the provider.
  */
 export declare const useDevicePortalConsumer: (room: string, options?: DevicePortalConsumerOptions) => {
     value: string;
+    connectionStatus: ConnectionStatus;
     sendMessageToProvider: (message: string) => void;
 };
+export {};

package/dist/consumer/useDevicePortalConsumer.js

@@ -37,7 +37,9 @@ function getOrCreateEntry(key, room, peerId, options) {
     firstValuePromise: firstValuePromise,
     latestValue: undefined,
     lastSentValue: undefined,
+    connectionStatus: 'reconnecting',
     setValue: null,
+    setConnectionStatus: null,
     destroyTimer: null,
     room: room,
     optionsSnapshot: newOptionsKey
@@ -50,10 +52,18 @@ function getOrCreateEntry(key, room, peerId, options) {
       (_entry$setValue = entry.setValue) === null || _entry$setValue === void 0 || _entry$setValue.call(entry, value);
     },
     onConnected: function onConnected() {
+      var _entry$setConnectionS;
+      entry.connectionStatus = 'connected';
+      (_entry$setConnectionS = entry.setConnectionStatus) === null || _entry$setConnectionS === void 0 || _entry$setConnectionS.call(entry, 'connected');
       if (sendLastMessageOnReconnect && entry.lastSentValue !== undefined) {
         entry.consumer.send(entry.lastSentValue);
       }
     },
+    onDisconnected: function onDisconnected() {
+      var _entry$setConnectionS2;
+      entry.connectionStatus = 'reconnecting';
+      (_entry$setConnectionS2 = entry.setConnectionStatus) === null || _entry$setConnectionS2 === void 0 || _entry$setConnectionS2.call(entry, 'reconnecting');
+    },
     webSocketSignalingServer: options.webSocketSignalingServer,
     browserDirect: options.browserDirect,
     peerId: peerId
@@ -85,6 +95,14 @@ function scheduleDestroy(key) {
  *
  * @param room - The unique room ID.
  * @param options - Consumer configuration options.
+ * @returns An object with:
+ *   - `value`: the latest value pushed by the provider. After Suspense
+ *     resolves, this never goes "stale" to `undefined` — if the peer link
+ *     drops, the last received value is retained.
+ *   - `connectionStatus`: `'connected'` or `'reconnecting'`. Use this to
+ *     render a banner / indicator when the peer link is temporarily down.
+ *     The hook keeps trying to reconnect in the background.
+ *   - `sendMessageToProvider`: send a message back to the provider.
  */
 var useDevicePortalConsumer = function useDevicePortalConsumer(room) {
   var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
@@ -104,17 +122,27 @@ var useDevicePortalConsumer = function useDevicePortalConsumer(room) {
     _useState2 = _slicedToArray(_useState, 2),
     value = _useState2[0],
     setValue = _useState2[1];
-  // Wire up the entry's setValue so the Consumer can push updates.
+  var _useState3 = useState(function () {
+      return entry.connectionStatus;
+    }),
+    _useState4 = _slicedToArray(_useState3, 2),
+    connectionStatus = _useState4[0],
+    setConnectionStatus = _useState4[1];
+  // Wire up the entry's setters so the Consumer can push updates.
   entry.setValue = setValue;
+  entry.setConnectionStatus = setConnectionStatus;
   useEffect(function () {
     var e = getOrCreateEntry(cacheKey, room, peerIdRef.current, options);
     e.setValue = setValue;
-    // Sync in case a value arrived between render and effect commit.
+    e.setConnectionStatus = setConnectionStatus;
+    // Sync in case state changed between render and effect commit.
     if (e.latestValue !== undefined) {
       setValue(e.latestValue);
     }
+    setConnectionStatus(e.connectionStatus);
     return function () {
       e.setValue = null;
+      e.setConnectionStatus = null;
       scheduleDestroy(cacheKey);
     };
   }, [cacheKey, room, options.webSocketSignalingServer, options.browserDirect, options.sendLastMessageOnReconnect]);
@@ -124,6 +152,7 @@ var useDevicePortalConsumer = function useDevicePortalConsumer(room) {
   }, [entry]);
   return {
     value: value,
+    connectionStatus: connectionStatus,
     sendMessageToProvider: sendMessageToProvider
   };
 };

package/dist/consumer/useDevicePortalConsumer.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDevicePortalConsumer.js","sources":["../../src/consumer/useDevicePortalConsumer.ts"],"sourcesContent":["import {\n\tClient,\n\tgeneratePeerId,\n\ttype BrowserDirectOption,\n\ttype PeerId,\n} from '@device-portal/client'\nimport { use, useCallback, useEffect, useRef, useState } from 'react'\n\n/**\n * Configuration options for the Device Portal Consumer.\n */\nexport type DevicePortalConsumerOptions = {\n\t/** URL of the signaling server, or null to disable. */\n\twebSocketSignalingServer?: string | null\n\t/** Browser direct signaling options. */\n\tbrowserDirect?: BrowserDirectOption\n\t/** Whether to automatically send the last 'send()' value back to the provider on reconnect. Default: false. */\n\tsendLastMessageOnReconnect?: boolean\n}\n\n// ---------------------------------------------------------------------------\n// Module-level cache for Consumer entries.\n//\n// Why module-level? The cache must survive React Suspense throws (which\n// discard in-progress render state) and React Strict Mode's synchronous\n// unmount/remount cycle.  The entry is keyed by room + options, which is\n// stable across both scenarios.\n//\n// Cleanup uses a grace-period timeout so that Strict Mode's immediate\n// remount can reclaim the entry before it's destroyed.\n// ---------------------------------------------------------------------------\n\ntype ConsumerEntry = {\n\tconsumer: Client\n\tfirstValuePromise: Promise<string>\n\tlatestValue: string | undefined\n\tlastSentValue: string | undefined\n\tsetValue: ((value: string) => void) | null\n\tdestroyTimer: ReturnType<typeof setTimeout> | null\n\troom: string\n\toptionsSnapshot: string\n}\n\nconst entries = new Map<string, ConsumerEntry>()\n\nfunction optionsKey(options: DevicePortalConsumerOptions): string {\n\treturn `${options.webSocketSignalingServer ?? ''}\\0${options.browserDirect ?? ''}\\0${options.sendLastMessageOnReconnect ?? ''}`\n}\n\nfunction getOrCreateEntry(\n\tkey: string,\n\troom: string,\n\tpeerId: PeerId,\n\toptions: DevicePortalConsumerOptions,\n): ConsumerEntry {\n\tconst existing = entries.get(key)\n\tconst newOptionsKey = optionsKey(options)\n\n\tif (existing) {\n\t\t// Cancel any pending destruction\n\t\tif (existing.destroyTimer !== null) {\n\t\t\tclearTimeout(existing.destroyTimer)\n\t\t\texisting.destroyTimer = null\n\t\t}\n\t\t// Reuse if room + options unchanged\n\t\tif (existing.room === room && existing.optionsSnapshot === newOptionsKey) {\n\t\t\treturn existing\n\t\t}\n\t\t// Room/options changed – destroy old entry synchronously\n\t\texisting.consumer.destroy()\n\t\tentries.delete(key)\n\t}\n\n\t// Create a deferred promise for Suspense via use()\n\tlet resolveFirst!: (value: string) => void\n\tconst firstValuePromise = new Promise<string>((resolve) => {\n\t\tresolveFirst = resolve\n\t})\n\n\tconst sendLastMessageOnReconnect = options.sendLastMessageOnReconnect ?? false\n\n\tconst entry: ConsumerEntry = {\n\t\tconsumer: undefined!, // assigned below\n\t\tfirstValuePromise,\n\t\tlatestValue: undefined,\n\t\tlastSentValue: undefined,\n\t\tsetValue: null,\n\t\tdestroyTimer: null,\n\t\troom,\n\t\toptionsSnapshot: newOptionsKey,\n\t}\n\n\tentry.consumer = new Client(room, {\n\t\tonMessage: (value) => {\n\t\t\tentry.latestValue = value\n\t\t\tresolveFirst(value)\n\t\t\tentry.setValue?.(value)\n\t\t},\n\t\tonConnected: () => {\n\t\t\tif (sendLastMessageOnReconnect && entry.lastSentValue !== undefined) {\n\t\t\t\tentry.consumer.send(entry.lastSentValue)\n\t\t\t}\n\t\t},\n\t\twebSocketSignalingServer: options.webSocketSignalingServer,\n\t\tbrowserDirect: options.browserDirect,\n\t\tpeerId,\n\t})\n\n\tentries.set(key, entry)\n\treturn entry\n}\n\nfunction scheduleDestroy(key: string) {\n\tconst entry = entries.get(key)\n\tif (!entry || entry.destroyTimer !== null) return\n\n\t// setTimeout(0) so React Strict Mode's synchronous unmount/remount\n\t// reclaims the entry before it's destroyed, while real unmounts\n\t// (navigation, conditional render) clean up on the next microtask.\n\tentry.destroyTimer = setTimeout(() => {\n\t\tentry.consumer.destroy()\n\t\tentries.delete(key)\n\t}, 0)\n}\n\n/**\n * A React hook that joins a Device Portal room and receives values from the\n * provider.  **Suspends** the component until the first value is received —\n * wrap the consumer in a `<Suspense>` boundary.\n *\n * Requires React 19+. Uses `use()` for Suspense integration.\n *\n * Safe under React Strict Mode and concurrent features: the underlying\n * Consumer is cached with a grace-period cleanup so synchronous\n * unmount/remount cycles do not create duplicate connections.\n *\n * @param room - The unique room ID.\n * @param options - Consumer configuration options.\n */\nexport const useDevicePortalConsumer = (\n\troom: string,\n\toptions: DevicePortalConsumerOptions = {},\n): {\n\tvalue: string\n\tsendMessageToProvider: (message: string) => void\n} => {\n\t// Key by room + options rather than useId(), because useId() is not\n\t// stable across Suspense re-throws when sibling state updates cause\n\t// the component tree to re-mount.\n\tconst cacheKey = `${room}\\0${optionsKey(options)}`\n\tconst peerIdRef = useRef<PeerId>(generatePeerId())\n\n\tconst entry = getOrCreateEntry(cacheKey, room, peerIdRef.current, options)\n\n\t// Suspends until the first value arrives (React 19 use() API).\n\tconst firstValue = use(entry.firstValuePromise)\n\n\t// After the first value, track subsequent updates via useState.\n\tconst [value, setValue] = useState(() => entry.latestValue ?? firstValue)\n\n\t// Wire up the entry's setValue so the Consumer can push updates.\n\tentry.setValue = setValue\n\n\tuseEffect(() => {\n\t\tconst e = getOrCreateEntry(cacheKey, room, peerIdRef.current, options)\n\t\te.setValue = setValue\n\n\t\t// Sync in case a value arrived between render and effect commit.\n\t\tif (e.latestValue !== undefined) {\n\t\t\tsetValue(e.latestValue)\n\t\t}\n\n\t\treturn () => {\n\t\t\te.setValue = null\n\t\t\tscheduleDestroy(cacheKey)\n\t\t}\n\t}, [\n\t\tcacheKey,\n\t\troom,\n\t\toptions.webSocketSignalingServer,\n\t\toptions.browserDirect,\n\t\toptions.sendLastMessageOnReconnect,\n\t])\n\n\tconst sendMessageToProvider = useCallback(\n\t\t(message: string) => {\n\t\t\tentry.lastSentValue = message\n\t\t\tentry.consumer.send(message)\n\t\t},\n\t\t[entry],\n\t)\n\n\treturn { value, sendMessageToProvider }\n}\n"],"names":["entries","Map","optionsKey","options","_options$webSocketSig","_options$browserDirec","_options$sendLastMess","concat","webSocketSignalingServer","browserDirect","sendLastMessageOnReconnect","getOrCreateEntry","key","room","peerId","_options$sendLastMess2","existing","get","newOptionsKey","destroyTimer","clearTimeout","optionsSnapshot","consumer","destroy","resolveFirst","firstValuePromise","Promise","resolve","entry","undefined","latestValue","lastSentValue","setValue","Client","onMessage","value","_entry$setValue","call","onConnected","send","set","scheduleDestroy","setTimeout","useDevicePortalConsumer","arguments","length","cacheKey","peerIdRef","useRef","generatePeerId","current","firstValue","use","_useState","useState","_entry$latestValue","_useState2","_slicedToArray","useEffect","e","sendMessageToProvider","useCallback","message"],"mappings":"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"}
+{"version":3,"file":"useDevicePortalConsumer.js","sources":["../../src/consumer/useDevicePortalConsumer.ts"],"sourcesContent":["import {\n\tClient,\n\tgeneratePeerId,\n\ttype BrowserDirectOption,\n\ttype PeerId,\n} from '@device-portal/client'\nimport { use, useCallback, useEffect, useRef, useState } from 'react'\n\n/**\n * Configuration options for the Device Portal Consumer.\n */\nexport type DevicePortalConsumerOptions = {\n\t/** URL of the signaling server, or null to disable. */\n\twebSocketSignalingServer?: string | null\n\t/** Browser direct signaling options. */\n\tbrowserDirect?: BrowserDirectOption\n\t/** Whether to automatically send the last 'send()' value back to the provider on reconnect. Default: false. */\n\tsendLastMessageOnReconnect?: boolean\n}\n\n// ---------------------------------------------------------------------------\n// Module-level cache for Consumer entries.\n//\n// Why module-level? The cache must survive React Suspense throws (which\n// discard in-progress render state) and React Strict Mode's synchronous\n// unmount/remount cycle.  The entry is keyed by room + options, which is\n// stable across both scenarios.\n//\n// Cleanup uses a grace-period timeout so that Strict Mode's immediate\n// remount can reclaim the entry before it's destroyed.\n// ---------------------------------------------------------------------------\n\n/**\n * Connection state reported by {@link useDevicePortalConsumer}.\n *\n * The hook suspends until the first value arrives, so `'connecting'` is never\n * observed — by the time the component renders, the consumer was at least once\n * connected. After that, the status flips to `'reconnecting'` whenever the\n * peer link drops (peer left, ICE failure) and back to `'connected'` once the\n * link is re-established.\n */\ntype ConnectionStatus = 'connected' | 'reconnecting'\n\ntype ConsumerEntry = {\n\tconsumer: Client\n\tfirstValuePromise: Promise<string>\n\tlatestValue: string | undefined\n\tlastSentValue: string | undefined\n\tconnectionStatus: ConnectionStatus\n\tsetValue: ((value: string) => void) | null\n\tsetConnectionStatus: ((status: ConnectionStatus) => void) | null\n\tdestroyTimer: ReturnType<typeof setTimeout> | null\n\troom: string\n\toptionsSnapshot: string\n}\n\nconst entries = new Map<string, ConsumerEntry>()\n\nfunction optionsKey(options: DevicePortalConsumerOptions): string {\n\treturn `${options.webSocketSignalingServer ?? ''}\\0${options.browserDirect ?? ''}\\0${options.sendLastMessageOnReconnect ?? ''}`\n}\n\nfunction getOrCreateEntry(\n\tkey: string,\n\troom: string,\n\tpeerId: PeerId,\n\toptions: DevicePortalConsumerOptions,\n): ConsumerEntry {\n\tconst existing = entries.get(key)\n\tconst newOptionsKey = optionsKey(options)\n\n\tif (existing) {\n\t\t// Cancel any pending destruction\n\t\tif (existing.destroyTimer !== null) {\n\t\t\tclearTimeout(existing.destroyTimer)\n\t\t\texisting.destroyTimer = null\n\t\t}\n\t\t// Reuse if room + options unchanged\n\t\tif (existing.room === room && existing.optionsSnapshot === newOptionsKey) {\n\t\t\treturn existing\n\t\t}\n\t\t// Room/options changed – destroy old entry synchronously\n\t\texisting.consumer.destroy()\n\t\tentries.delete(key)\n\t}\n\n\t// Create a deferred promise for Suspense via use()\n\tlet resolveFirst!: (value: string) => void\n\tconst firstValuePromise = new Promise<string>((resolve) => {\n\t\tresolveFirst = resolve\n\t})\n\n\tconst sendLastMessageOnReconnect = options.sendLastMessageOnReconnect ?? false\n\n\tconst entry: ConsumerEntry = {\n\t\tconsumer: undefined!, // assigned below\n\t\tfirstValuePromise,\n\t\tlatestValue: undefined,\n\t\tlastSentValue: undefined,\n\t\tconnectionStatus: 'reconnecting',\n\t\tsetValue: null,\n\t\tsetConnectionStatus: null,\n\t\tdestroyTimer: null,\n\t\troom,\n\t\toptionsSnapshot: newOptionsKey,\n\t}\n\n\tentry.consumer = new Client(room, {\n\t\tonMessage: (value) => {\n\t\t\tentry.latestValue = value\n\t\t\tresolveFirst(value)\n\t\t\tentry.setValue?.(value)\n\t\t},\n\t\tonConnected: () => {\n\t\t\tentry.connectionStatus = 'connected'\n\t\t\tentry.setConnectionStatus?.('connected')\n\t\t\tif (sendLastMessageOnReconnect && entry.lastSentValue !== undefined) {\n\t\t\t\tentry.consumer.send(entry.lastSentValue)\n\t\t\t}\n\t\t},\n\t\tonDisconnected: () => {\n\t\t\tentry.connectionStatus = 'reconnecting'\n\t\t\tentry.setConnectionStatus?.('reconnecting')\n\t\t},\n\t\twebSocketSignalingServer: options.webSocketSignalingServer,\n\t\tbrowserDirect: options.browserDirect,\n\t\tpeerId,\n\t})\n\n\tentries.set(key, entry)\n\treturn entry\n}\n\nfunction scheduleDestroy(key: string) {\n\tconst entry = entries.get(key)\n\tif (!entry || entry.destroyTimer !== null) return\n\n\t// setTimeout(0) so React Strict Mode's synchronous unmount/remount\n\t// reclaims the entry before it's destroyed, while real unmounts\n\t// (navigation, conditional render) clean up on the next microtask.\n\tentry.destroyTimer = setTimeout(() => {\n\t\tentry.consumer.destroy()\n\t\tentries.delete(key)\n\t}, 0)\n}\n\n/**\n * A React hook that joins a Device Portal room and receives values from the\n * provider.  **Suspends** the component until the first value is received —\n * wrap the consumer in a `<Suspense>` boundary.\n *\n * Requires React 19+. Uses `use()` for Suspense integration.\n *\n * Safe under React Strict Mode and concurrent features: the underlying\n * Consumer is cached with a grace-period cleanup so synchronous\n * unmount/remount cycles do not create duplicate connections.\n *\n * @param room - The unique room ID.\n * @param options - Consumer configuration options.\n * @returns An object with:\n *   - `value`: the latest value pushed by the provider. After Suspense\n *     resolves, this never goes \"stale\" to `undefined` — if the peer link\n *     drops, the last received value is retained.\n *   - `connectionStatus`: `'connected'` or `'reconnecting'`. Use this to\n *     render a banner / indicator when the peer link is temporarily down.\n *     The hook keeps trying to reconnect in the background.\n *   - `sendMessageToProvider`: send a message back to the provider.\n */\nexport const useDevicePortalConsumer = (\n\troom: string,\n\toptions: DevicePortalConsumerOptions = {},\n): {\n\tvalue: string\n\tconnectionStatus: ConnectionStatus\n\tsendMessageToProvider: (message: string) => void\n} => {\n\t// Key by room + options rather than useId(), because useId() is not\n\t// stable across Suspense re-throws when sibling state updates cause\n\t// the component tree to re-mount.\n\tconst cacheKey = `${room}\\0${optionsKey(options)}`\n\tconst peerIdRef = useRef<PeerId>(generatePeerId())\n\n\tconst entry = getOrCreateEntry(cacheKey, room, peerIdRef.current, options)\n\n\t// Suspends until the first value arrives (React 19 use() API).\n\tconst firstValue = use(entry.firstValuePromise)\n\n\t// After the first value, track subsequent updates via useState.\n\tconst [value, setValue] = useState(() => entry.latestValue ?? firstValue)\n\tconst [connectionStatus, setConnectionStatus] = useState<ConnectionStatus>(\n\t\t() => entry.connectionStatus,\n\t)\n\n\t// Wire up the entry's setters so the Consumer can push updates.\n\tentry.setValue = setValue\n\tentry.setConnectionStatus = setConnectionStatus\n\n\tuseEffect(() => {\n\t\tconst e = getOrCreateEntry(cacheKey, room, peerIdRef.current, options)\n\t\te.setValue = setValue\n\t\te.setConnectionStatus = setConnectionStatus\n\n\t\t// Sync in case state changed between render and effect commit.\n\t\tif (e.latestValue !== undefined) {\n\t\t\tsetValue(e.latestValue)\n\t\t}\n\t\tsetConnectionStatus(e.connectionStatus)\n\n\t\treturn () => {\n\t\t\te.setValue = null\n\t\t\te.setConnectionStatus = null\n\t\t\tscheduleDestroy(cacheKey)\n\t\t}\n\t}, [\n\t\tcacheKey,\n\t\troom,\n\t\toptions.webSocketSignalingServer,\n\t\toptions.browserDirect,\n\t\toptions.sendLastMessageOnReconnect,\n\t])\n\n\tconst sendMessageToProvider = useCallback(\n\t\t(message: string) => {\n\t\t\tentry.lastSentValue = message\n\t\t\tentry.consumer.send(message)\n\t\t},\n\t\t[entry],\n\t)\n\n\treturn { value, connectionStatus, sendMessageToProvider }\n}\n"],"names":["entries","Map","optionsKey","options","_options$webSocketSig","_options$browserDirec","_options$sendLastMess","concat","webSocketSignalingServer","browserDirect","sendLastMessageOnReconnect","getOrCreateEntry","key","room","peerId","_options$sendLastMess2","existing","get","newOptionsKey","destroyTimer","clearTimeout","optionsSnapshot","consumer","destroy","resolveFirst","firstValuePromise","Promise","resolve","entry","undefined","latestValue","lastSentValue","connectionStatus","setValue","setConnectionStatus","Client","onMessage","value","_entry$setValue","call","onConnected","_entry$setConnectionS","send","onDisconnected","_entry$setConnectionS2","set","scheduleDestroy","setTimeout","useDevicePortalConsumer","arguments","length","cacheKey","peerIdRef","useRef","generatePeerId","current","firstValue","use","_useState","useState","_entry$latestValue","_useState2","_slicedToArray","_useState3","_useState4","useEffect","e","sendMessageToProvider","useCallback","message"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@device-portal/react",
-	"version": "0.0.23",
+	"version": "0.1.1",
 	"description": "Simple WebRTC data channel for React.",
 	"type": "module",
 	"main": "./dist/index.js",
@@ -39,7 +39,7 @@
 		"react": ">=19"
 	},
 	"dependencies": {
-		"@device-portal/client": "^0.0.23"
+		"@device-portal/client": "^0.1.1"
 	},
 	"devDependencies": {
 		"@babel/core": "^7.24.0",