Commit 3582ccf
committed
Support
The problem
---
If a `<turbo-frame>` element is rendered without a `[src]` attribute,
calls to `.reload()` will have no effect. If a `<turbo-frame>` is to be
its own browsing context, it should be able to apply its current
location (that is, it's owning document's current location) to its
browsing context.
For example, if a page has a `<turbo-frame>` element that contains text
that's typically updated by a Web Socket-delivered `<turbo-stream>`, it
might be useful to [gracefully degrade][] to periodic long-polling if
that Web Socket connection were to fail. That might involve something
like a `reload` Stimulus controller with a delay:
```html
<script type="module">
import { Application, Controller } from "@hotwired/stimulus"
const application = // boot up a Stimulus application
application.register("reload", class extends Controller {
static values = { frequency: Number }
disconnect() {
this.#reset()
}
frequencyValueChanged(frequencyInMilliseconds) {
this.#reset()
if (frequencyInMilliseconds) {
this.intervalID = setInterval(() => this.element.reload(), frequencyInMilliseconds)
}
}
#reset() {
if (this.intervalID) clearInterval(this.intervalID)
}
})
</script>
<turbo-frame id="dynamic-data" data-controller="reload" data-reload-frequency-value="30000">
<h1>This data will refresh every 30 seconds</h1>
</turbo-frame>
```
The fact that the `<turbo-frame id="dynamic-data">` element doesn't have
a `[src]` attribute shouldn't prevent the page from being able to
re-fetch its content.
The solution
---
When `FrameElement.reload()` is invoked, it delegates to its delegate
instance's `sourceURLReloaded()` method. In all cases,
`FrameElement.delegate` is an instance of `FrameController`.
This commit extends the `FrameController.sourceURLReloaded()`
implementation to set the element's `[src]` attribute to the element's
[baseURI][] value, which sets off the usual attribute change listeners
and `<turbo-frame>` navigation logic.
[baseURI]: https://developer.mozilla.org/en-US/docs/Web/API/Node/baseURI
[gracefully degrade]: https://developer.mozilla.org/en-US/docs/Glossary/Graceful_degradationFrameElement.reload() without an initial [src] attribute1 parent 32cadc0 commit 3582ccf
File tree
2 files changed
+33
-3
lines changed- src
- core/frames
- tests/functional
2 files changed
+33
-3
lines changed| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
94 | 94 | | |
95 | 95 | | |
96 | 96 | | |
97 | | - | |
| 97 | + | |
98 | 98 | | |
99 | 99 | | |
100 | 100 | | |
| |||
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
515 | 515 | | |
516 | 516 | | |
517 | 517 | | |
518 | | - | |
| 518 | + | |
519 | 519 | | |
520 | 520 | | |
521 | 521 | | |
522 | 522 | | |
523 | 523 | | |
524 | 524 | | |
525 | 525 | | |
526 | | - | |
| 526 | + | |
| 527 | + | |
| 528 | + | |
| 529 | + | |
| 530 | + | |
| 531 | + | |
| 532 | + | |
| 533 | + | |
| 534 | + | |
| 535 | + | |
| 536 | + | |
| 537 | + | |
| 538 | + | |
| 539 | + | |
| 540 | + | |
| 541 | + | |
| 542 | + | |
| 543 | + | |
| 544 | + | |
| 545 | + | |
| 546 | + | |
| 547 | + | |
| 548 | + | |
| 549 | + | |
| 550 | + | |
| 551 | + | |
| 552 | + | |
| 553 | + | |
| 554 | + | |
| 555 | + | |
| 556 | + | |
527 | 557 | | |
528 | 558 | | |
529 | 559 | | |
| |||
0 commit comments