Merge pull request #970 from seanpdoyle/stream-source-close

Close `StreamSource` when `<turbo-stream-source>` disconnects

src/elements/stream_source_element.js

@@ -11,6 +11,8 @@ export class StreamSourceElement extends HTMLElement {
 
   disconnectedCallback() {
     if (this.streamSource) {
+      this.streamSource.close()
+
       disconnectStreamSource(this.streamSource)
     }
   }

src/tests/functional/stream_tests.js

@@ -104,6 +104,9 @@ test("test receiving a stream message over SSE", async ({ page }) => {
       `<turbo-stream-source id="stream-source" src="/__turbo/messages"></turbo-stream-source>`
     )
   })
+  await nextBeat()
+  assert.equal(await getReadyState(page, "stream-source"), await page.evaluate(() => EventSource.OPEN))
+
   const messages = await page.locator("#messages .message")
 
   assert.deepEqual(await messages.allTextContents(), ["First"])
@@ -113,11 +116,33 @@ test("test receiving a stream message over SSE", async ({ page }) => {
   await waitUntilText(page, "Hello world!")
   assert.deepEqual(await messages.allTextContents(), ["First", "Hello world!"])
 
-  await page.evaluate(() => document.getElementById("stream-source")?.remove())
-  await nextBeat()
+  const readyState = await page.evaluate((id) => {
+    const element = document.getElementById(id)
+
+    if (element && element.streamSource) {
+      element.remove()
+
+      return element.streamSource.readyState
+    } else {
+      return -1
+    }
+  }, "stream-source")
+  assert.equal(readyState, await page.evaluate(() => EventSource.CLOSED))
 
   await page.click("#async button")
   await nextBeat()
 
   assert.deepEqual(await messages.allTextContents(), ["First", "Hello world!"])
 })
+
+async function getReadyState(page, id) {
+  return page.evaluate((id) => {
+    const element = document.getElementById(id)
+
+    if (element?.streamSource) {
+      return element.streamSource.readyState
+    } else {
+      return -1
+    }
+  }, id)
+}