Web streams that work across web workers and iframes.
npm install @transcend-io/remote-web-streams
</code>s. In addition to your typical modern browsers, this fork also works with Safari 14.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Problem</h2><br />Suppose you want to process some data that you've downloaded somewhere. The processing is quite CPU-intensive,<br />so you want to do it inside a worker. No problem, the web has you covered with <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">postMessage</code>!</p><p class="my-3">``<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js<br />// main.js<br />(async () => {<br /> const response = await fetch('./some-data.txt');<br /> const data = await response.text();<br /> const worker = new Worker('./worker.js');<br /> worker.onmessage = (event) => {<br /> const output = event.data;<br /> const results = document.getElementById('results');<br /> results.appendChild(document.createTextNode(output)); // tadaa!<br /> };<br /> worker.postMessage(data);<br />})();</p><p class="my-3">// worker.js<br />self.onmessage = (event) => {<br /> const input = event.data;<br /> const output = process(input); // do the actual work<br /> self.postMessage(output);<br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">All is good: your processing does not block the main thread, so your web page remains responsive. However, it takes<br />quite a long time before the results show up: first <em>all</em> of the data needs to be downloaded, then <em>all</em> that data<br />needs to be processed, and <em>finally</em> everything is shown on the page. Wouldn't it be nice if we could already show<br />something as soon as <em>some</em> of the data has been downloaded and processed?</p><p class="my-3">Normally, you'd tackle this with by reading the input as a stream, piping it through one or more transform streams<br />and finally displaying the results as they come in.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js<br />// main.js<br />(async () => {<br /> const response = await fetch('./some-data.txt');<br /> await response.body<br /> .pipeThrough(new TransformStream({<br /> transform(chunk, controller) {<br /> controller.enqueue(process(chunk)); // do the actual work<br /> }<br /> }))<br /> .pipeTo(new WritableStream({<br /> write(chunk) {<br /> const results = document.getElementById('results');<br /> results.appendChild(document.createTextNode(chunk)); // tadaa!<br /> }<br /> }));<br />})();<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">Now you can see the first results as they come in, but your processing is blocking the main thread again!<br />Can we get the best of both worlds: <strong>process data as it comes in, but off the main thread</strong>?</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Solution</h2><br />Enter: </code>remote-web-streams<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. With this libray, you can create pairs of readable and writable streams<br />where you can write chunks to a writable stream inside one context, and read those chunks from a readable stream<br /><strong>inside a different context</strong>.<br />Functionally, such a pair behaves just like an [identity transform stream][identity-transform-stream], and you can<br />use and compose them just like any other stream.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Basic setup</h2></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3><br />The basic steps for setting up a pair of linked streams are:<br />1. Construct a </code>RemoteReadableStream<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. This returns two objects:<br /> * a </code>MessagePort<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> which must be used to construct the linked </code>WritableStream<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> inside the other context<br /> * a </code>ReadableStream<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> which will read chunks written by the linked </code>WritableStream<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js<br />// main.js<br />const { readable, writablePort } = new RemoteWebStreams.RemoteReadableStream();<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />2. Transfer the </code>writablePort<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> to the other context, and instantiate the linked </code>WritableStream<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> in that context<br /> using </code>fromWritablePort<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">.<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js<br />// main.js<br />const worker = new Worker('./worker.js');<br />worker.postMessage({ writablePort }, [writablePort]);</p><p class="my-3">// worker.js<br />self.onmessage = (event) => {<br /> const { writablePort } = event.data;<br /> const writable = RemoteWebStreams.fromWritablePort(writablePort);<br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />3. Use the streams as usual! Whenever you write something to the </code>writable<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> inside one context,<br /> the </code>readable<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> in the other context will receive it.<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js<br />// worker.js<br />const writer = writable.getWriter();<br />writer.write('hello');<br />writer.write('world');<br />writer.close();</p><p class="my-3">// main.js<br />(async () => {<br /> const reader = readable.getReader();<br /> console.log(await reader.read()); // { done: false, value: 'hello' }<br /> console.log(await reader.read()); // { done: false, value: 'world' }<br /> console.log(await reader.read()); // { done: true, value: undefined }<br />})();<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3><br />You can also create a </code>RemoteWritableStream<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">.<br />This is the complement to </code>RemoteReadableStream<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">:<br />* The constructor (in the original context) returns a </code>WritableStream<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> (instead of a readable one).<br />* You transfer the </code>readablePort<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> to the other context,<br /> and instantiate the linked </code>ReadableStream<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> with </code>fromReadablePort<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> inside that context.<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js<br />// main.js<br />const { writable, readablePort } = new RemoteWebStreams.RemoteWritableStream();<br />worker.postMessage({ readablePort }, [readablePort]);<br />const writer = writable.getWriter();<br />// ...</p><p class="my-3">// worker.js<br />self.onmessage = (event) => {<br /> const { readablePort } = event.data;<br /> const writable = RemoteWebStreams.fromReadablePort(readablePort);<br /> const reader = readable.getReader();<br /> // ...<br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Examples</h2></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3><br />In the basic setup, we create one pair of streams and transfer one end to the worker.<br />However, it's also possible to set up multiple pairs and transfer them all to a worker.</p><p class="my-3">This opens up interesting possibilities. We can use a </code>RemoteWritableStream<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> to write chunks to a worker,<br />let the worker transform them using one or more </code>TransformStream<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">s, and then read those transformed chunks<br />back on the main thread using a </code>RemoteReadableStream<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">.<br />This allows us to move one or more CPU-intensive </code>TransformStream<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">s off the main thread,<br />and turn them into a "remote transform stream".</p><p class="my-3">To demonstrate these "remote transform streams", we set one up to solve the original problem statement:<br />1. Create a </code>RemoteReadableStream<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> and a </code>RemoteWritableStream<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> on the main thread.<br />2. Transfer both streams to the worker. Inside the worker, connect the </code>readable<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> to the </code>writable<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> by piping it<br /> through one or more </code>TransformStream<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">s.<br />3. On the main thread, write data to be transformed into the </code>writable<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> and read transformed data from the </code>readable<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">.<br /> Pro-tip: we can use </code>.pipeThrough({ readable, writable })<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> for this!</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js<br />// main.js<br />const { RemoteReadableStream, RemoteWritableStream } = RemoteWebStreams;<br />(async () => {<br /> const worker = new Worker('./worker.js');<br /> // create a stream to send the input to the worker<br /> const { writable, readablePort } = new RemoteWritableStream();<br /> // create a stream to receive the output from the worker<br /> const { readable, writablePort } = new RemoteReadableStream();<br /> // transfer the other ends to the worker<br /> worker.postMessage({ readablePort, writablePort }, [readablePort, writablePort]);</p><p class="my-3"> const response = await fetch('./some-data.txt');<br /> await response.body<br /> // send the downloaded data to the worker<br /> // and receive the results back<br /> .pipeThrough({ readable, writable })<br /> // show the results as they come in<br /> .pipeTo(new WritableStream({<br /> write(chunk) {<br /> const results = document.getElementById('results');<br /> results.appendChild(document.createTextNode(chunk)); // tadaa!<br /> }<br /> }));<br />})();</p><p class="my-3">// worker.js<br />const { fromReadablePort, fromWritablePort } = RemoteWebStreams;<br />self.onmessage = async (event) => {<br /> // create the input and output streams from the transferred ports<br /> const { readablePort, writablePort } = event.data;<br /> const readable = fromReadablePort(readablePort);<br /> const writable = fromWritablePort(writablePort);</p><p class="my-3"> // process data<br /> await readable<br /> .pipeThrough(new TransformStream({<br /> transform(chunk, controller) {<br /> controller.enqueue(process(chunk)); // do the actual work<br /> }<br /> }))<br /> .pipeTo(writable); // send the results back to main thread<br />};<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />With this set up, we achieve the desired goals:<br />* Data is transformed as soon as it arrives on the main thread.<br />* Transformed data is displayed on the web page as soon as it is transformed by the worker.<br />* All of the data processing happens inside the worker, so it never blocks the main thread.</p><p class="my-3">The results are shown as fast as possible, and your web page stays snappy. Great success! 🎉</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Behind the scenes</h2><br />The library works its magic by creating a </code>MessageChannel<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> between the </code>WritableStream<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> and the </code>ReadableStream`.<br />The writable end sends a message to the readable end whenever a new chunk is written,<br />so the readable end can enqueue it for reading.<br />Similarly, the readable end sends a message to the writable end whenever it needs more data,<br />so the writable end can release any backpressure.</p><p class="my-3">[streams-spec]: https://streams.spec.whatwg.org/<br />[identity-transform-stream]: https://streams.spec.whatwg.org/#identity-transform-stream<br /></p></div><div class="flex justify-center absolute inset-x-0 bottom-0 bg-gradient-to-t from-background via-background to-transparent pb-4 pt-16"><button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down mr-1 h-4 w-4"><path d="m6 9 6 6 6-6"></path></svg>Show more</button></div></div></div><template id="P:3"></template><template id="P:4"></template></div></div></div><script>self.__next_f.push([1,"28:[\"$\",\"div\",null,{\"data-slot\":\"card-content\",\"className\":\"px-6\",\"children\":[\"$\",\"div\",null,{\"className\":\"grid gap-1 sm:grid-cols-2 lg:grid-cols-3\",\"children\":[[\"$\",\"$L5\",\"@jest/globals\",{\"href\":\"/package/%40jest%2Fglobals\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@jest/globals\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^26.0.1\"}]]}],[\"$\",\"$L5\",\"jest\",{\"href\":\"/package/jest\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"jest\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^26.0.1\"}]]}],[\"$\",\"$L5\",\"rollup\",{\"href\":\"/package/rollup\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"rollup\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^2.12.0\"}]]}],[\"$\",\"$L5\",\"rollup-plugin-dts\",{\"href\":\"/package/rollup-plugin-dts\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"rollup-plugin-dts\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^1.4.7\"}]]}],[\"$\",\"$L5\",\"rollup-plugin-typescript\",{\"href\":\"/package/rollup-plugin-typescript\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[\"$L2a\",\"$undefined\"]}],\"rollup-plugin-typescript\"]}],\"$L2b\"]}],\"$L2c\",\"$L2d\",\"$L2e\"]}]}]\n"])</script><script>self.__next_f.push([1,"2a:[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}]\n2b:[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^1.0.1\"}]\n2c:[\"$\",\"$L5\",\"ts-jest\",{\"href\":\"/package/ts-jest\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"ts-jest\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^26.1.0\"}]]}]\n2d:[\"$\",\"$L5\",\"tslib\",{\"href\":\"/package/tslib\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"tslib\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^2.0.0\"}]]}]\n2e:[\"$\",\"$L5\",\"typescript\",{\"href\":\"/package/typescript\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"typescript\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^4.0.3\"}]]}]\n"])</script><div hidden id="S:3"><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-dependencies" hidden="" id="radix-_R_aav5ubrb_-content-dependencies" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:3","P:3")</script><div hidden id="S:4"><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-versions" hidden="" id="radix-_R_aav5ubrb_-content-versions" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div></div><script>$RS("S:4","P:4")</script><script>$RC("B:1","S:1")</script></body></html>