From f3b36b840da02e2988140f9800ae74ac26ee835b Mon Sep 17 00:00:00 2001
From: Reilly Grant <reillyg@google.com>
Date: Fri, 21 Feb 2025 22:05:59 +0000
Subject: [PATCH] Update example of creating a pipe chain on readable

The example needs to explain how to use the Promise returned by pipeTo()
to wait for the port to be closable.

Fixed #209.
---
 index.html | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index eafec2a..97de903 100644
--- a/index.html
+++ b/index.html
@@ -949,11 +949,24 @@ <h2>
           }
         }
 
-        const lineReader = port.readable
-            .pipeThrough(new TextDecoderStream())
+        const decoder = new TextDecoderStream();
+        const streamClosed = port.readable.pipeTo(decoder.writable);
+        const lineReader = decoder.readable
             .pipeThrough(new TransformStream(new LineBreakTransformer()))
             .getReader();
           </pre>
+          <p>
+            As in [[[#close-example]]] the pipe chain cannot be constructed
+            using only `pipeThrough()`. It is necessary to use `pipeTo()` when
+            attaching the first {{TransformStream}} to the {{SerialPort}} so
+            that you can wait for the pipe chain to be closed when you want to
+            close the port.
+          </p>
+          <pre class="js">
+        lineReader.cancel();
+        await streamClosed;
+        await port.close();
+          </pre>
           <p>
             Some other ways of encoding message boundaries are to prefix each
             message with its length or to wait a defined length of time before
@@ -1573,7 +1586,7 @@ <h4>
         <h3>
           <dfn>close()</dfn> method
         </h3>
-        <aside class="example">
+        <aside id="close-example" class="example">
           <p>
             When communication with the port is no longer required it can be
             closed and the associated resources released by the system.