Skip to content

Commit

Permalink
Use replaceChildren in StreamActions.update (#534)
Browse files Browse the repository at this point in the history
* Use `replaceChildren` in StreamActions.update

While processing `<turbo-stream action="update">` elements, Turbo
combines two steps:

1. sets [`innerHTML = ""`][innerHTML]
2. call [`append(this.templateContent)`][append]

Modern `Element` implementations provide a [replaceChildren][] method
that effectively combines these two steps into a single, atomic
operation.

The `Element.replaceChildren()` method [isn't supported by Internet
Explorer][replaceChildren compatibility], but the `Element.append()`
method that it replaces [has the same incompatibility issues][append
compatibility].

[innerHTML]: https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML
[append]: https://developer.mozilla.org/en-US/docs/Web/API/Element/append
[append compatibility]: https://developer.mozilla.org/en-US/docs/Web/API/Element/append#browser_compatibility
[replaceChildren]: https://developer.mozilla.org/en-US/docs/Web/API/Element/replaceChildren
[replaceChildren compatibility]: https://developer.mozilla.org/en-US/docs/Web/API/Element/replaceChildren#browser_compatibility

* Fix lint violation

Co-authored-by: David Heinemeier Hansson <[email protected]>
  • Loading branch information
seanpdoyle and dhh authored Jun 19, 2022
1 parent c0b6bb6 commit 5109c56
Showing 1 changed file with 1 addition and 4 deletions.
5 changes: 1 addition & 4 deletions src/core/streams/stream_actions.ts
Original file line number Diff line number Diff line change
Expand Up @@ -30,9 +30,6 @@ export const StreamActions: {
},

update() {
this.targetElements.forEach((e) => {
e.innerHTML = ""
e.append(this.templateContent)
})
this.targetElements.forEach((e) => e.replaceChildren(this.templateContent))
},
}

0 comments on commit 5109c56

Please sign in to comment.