Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Turbo stream source #415

Merged
merged 4 commits into from Jun 19, 2022
Merged

Turbo stream source #415

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
8f94b5c
Improve test coverage for streams over SSE
seanpdoyle Oct 3, 2021
feb52fa
Introduce `<turbo-stream-source>`
seanpdoyle Oct 3, 2021
b89c8ef
Merge branch 'main' into turbo-stream-source
dhh Jun 19, 2022
a73c269
fix lint errors
seanpdoyle Jun 19, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
5 changes: 5 additions & 0 deletions src/elements/index.ts
View file
Open in desktop
@@ -1,6 +1,7 @@
import { FrameController } from "../core/frames/frame_controller"
import { FrameElement } from "./frame_element"
import { StreamElement } from "./stream_element"
import { StreamSourceElement } from "./stream_source_element"

FrameElement.delegateConstructor = FrameController

Expand All @@ -14,3 +15,7 @@ if (customElements.get("turbo-frame") === undefined) {
if (customElements.get("turbo-stream") === undefined) {
customElements.define("turbo-stream", StreamElement)
}

if (customElements.get("turbo-stream-source") === undefined) {
customElements.define("turbo-stream-source", StreamSourceElement)
}
22 changes: 22 additions & 0 deletions src/elements/stream_source_element.ts
View file
Open in desktop
@@ -0,0 +1,22 @@
import { StreamSource } from "../core/types"
import { connectStreamSource, disconnectStreamSource } from "../index"

export class StreamSourceElement extends HTMLElement {
streamSource: StreamSource | null = null

connectedCallback() {
this.streamSource = this.src.match(/^ws{1,2}:/) ? new WebSocket(this.src) : new EventSource(this.src)

connectStreamSource(this.streamSource)
}

disconnectedCallback() {
if (this.streamSource) {
disconnectStreamSource(this.streamSource)
}
}

get src(): string {
return this.getAttribute("src") || ""
}
}
8 changes: 7 additions & 1 deletion src/tests/fixtures/stream.html
View file
Open in desktop
Expand Up @@ -4,8 +4,9 @@
<meta charset="utf-8">
<title>Turbo Streams</title>
<script src="/dist/turbo.es2017-umd.js" data-turbo-track="reload"></script>
<script>Turbo.connectStreamSource(new EventSource("/__turbo/messages"))</script></head>
</head>
<body>
<turbo-stream-source id="stream-source" src="/__turbo/messages"></turbo-stream-source>
<form id="create" method="post" action="/__turbo/messages">
<input type="hidden" name="content" value="Hello world!">
<input type="hidden" name="type" value="stream">
Expand All @@ -19,6 +20,11 @@
<button type="submit">Replace</button>
</form>

<form id="async" method="post" action="/__turbo/messages">
<input type="hidden" name="content" value="Hello world!">
<button>Receive Message</button>
</form>

<div id="messages">
<div class="message">First</div>
</div>
Expand Down
29 changes: 29 additions & 0 deletions src/tests/functional/stream_tests.ts
View file
Open in desktop
Expand Up @@ -34,6 +34,35 @@ export class StreamTests extends FunctionalTestCase {
this.assert.equal(await element[0].getVisibleText(), "Hello CSS!")
this.assert.equal(await element[1].getVisibleText(), "Hello CSS!")
}

async "test receiving a stream message asynchronously"() {
let messages = await this.querySelectorAll("#messages > *")

this.assert.ok(messages[0])
this.assert.notOk(messages[1], "receives streams when connected")
this.assert.notOk(messages[2], "receives streams when connected")

await this.clickSelector("#async button")
await this.nextBeat

messages = await this.querySelectorAll("#messages > *")

this.assert.ok(messages[0])
this.assert.ok(messages[1], "receives streams when connected")
this.assert.notOk(messages[2], "receives streams when connected")

await this.evaluate(() => document.getElementById("stream-source")?.remove())
await this.nextBeat

await this.clickSelector("#async button")
await this.nextBeat

messages = await this.querySelectorAll("#messages > *")

this.assert.ok(messages[0])
this.assert.ok(messages[1], "receives streams when connected")
this.assert.notOk(messages[2], "does not receive streams when disconnected")
}
}

StreamTests.registerSuite()
2 changes: 1 addition & 1 deletion src/tests/server.ts
View file
Open in desktop
Expand Up @@ -10,7 +10,7 @@ const streamResponses: Set<Response> = new Set()
router.use(multer().none())

router.use((request, response, next) => {
if (request.accepts(["text/html", "application/xhtml+xml"])) {
if (request.accepts(["text/html", "application/xhtml+xml", "text/event-stream"])) {
next()
} else {
response.sendStatus(422)
Expand Down