Commit e4da725
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 9a79b30 commit e4da725
File tree
2 files changed
+31
-2
lines changed- src
- core/frames
- tests/functional
2 files changed
+31
-2
lines changed| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
97 | 97 | | |
98 | 98 | | |
99 | 99 | | |
100 | | - | |
| 100 | + | |
101 | 101 | | |
102 | 102 | | |
103 | 103 | | |
| |||
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
624 | 624 | | |
625 | 625 | | |
626 | 626 | | |
627 | | - | |
| 627 | + | |
628 | 628 | | |
629 | 629 | | |
630 | 630 | | |
| |||
644 | 644 | | |
645 | 645 | | |
646 | 646 | | |
| 647 | + | |
| 648 | + | |
| 649 | + | |
| 650 | + | |
| 651 | + | |
| 652 | + | |
| 653 | + | |
| 654 | + | |
| 655 | + | |
| 656 | + | |
| 657 | + | |
| 658 | + | |
| 659 | + | |
| 660 | + | |
| 661 | + | |
| 662 | + | |
| 663 | + | |
| 664 | + | |
| 665 | + | |
| 666 | + | |
| 667 | + | |
| 668 | + | |
| 669 | + | |
| 670 | + | |
| 671 | + | |
| 672 | + | |
| 673 | + | |
| 674 | + | |
| 675 | + | |
647 | 676 | | |
648 | 677 | | |
649 | 678 | | |
| |||
0 commit comments