Activate `<script>` in Turbo Streams #660

seanpdoyle · 2022-07-31T21:07:26Z

Closes #527

When a <turbo-stream> element connects to the document, "activate"
each <script> element by re-creating it as an element owned by the
document instance.

To re-use the existing Renderer.createdScriptElement, this commit
extracts that logic to the src/util.ts module, and renames it to
activateScriptElement. Then, we replace each
this.createdScriptElement call site with a call to
activateScriptElement.

Along with that change, this commit changes the signature to expect an
HTMLScriptElement instance,

Finally, as part of adding test coverage for the new behavior, this
commit re-structures existing tests to be more particular about their
expectations, and to throw failure messages that provide more clarity.

Co-authored-by: Shia Labeouf felixfearest@gmail.com

Closes hotwired#527 When a `<turbo-stream>` element connects to the document, "activate" each `<script>` element by re-creating it as an element owned by the `document` instance. To re-use the existing `Renderer.createdScriptElement`, this commit extracts that logic to the `src/util.ts` module, and renames it to `activateScriptElement`. Then, we replace each `this.createdScriptElement` call site with a call to `activateScriptElement`. Along with that change, this commit changes the signature to expect an [HTMLScriptElement][] instance, Finally, as part of adding test coverage for the new behavior, this commit re-structures existing tests to be more particular about their expectations, and to throw failure messages that provide more clarity. [HTMLScriptElement]: https://developer.mozilla.org/en-US/docs/Web/API/HTMLScriptElement Co-authored-by: Shia Labeouf <felixfearest@gmail.com>

Closes hotwired/turbo#257 Closes hotwired/turbo#397 Follow-up to hotwired/turbo#257 (comment) hotwired/turbo#257 (comment) Depends on hotwired/turbo#660 Introduces the `Turbo::Stream::Redirect` concern to override the [redirect_to][] routing helper. When called with a `turbo_frame:` option, the `redirect_to` helper with check whether the request was made with the Turbo Stream `Accept:` header. When it's absent, the response will redirect with a typical HTTP status code and location. When present, the controller will respond with a `<turbo-stream>` element that invokes [Turbo.visit($URL, { frame: $TURBO_FRAME })][hotwired/turbo#649] where `$URL` is set to the redirect's path or URL, and `$TURBO_FRAME` is set to the `turbo_frame:` argument. This enables server-side actions to navigate the entire page with a `turbo_frame: "_top"` option. Incidentally, it also enables a frame request to navigate _a different_ frame. Typically, an HTTP that would result in a redirect nets two requests: the first submission, then the subsequent GET request to follow the redirect. In the case of a "break out", the same number of requests are made: the first submission, then the subsequent GET made by the `Turbo.visit` call. [redirect_to]: https://edgeapi.rubyonrails.org/classes/ActionController/Redirecting.html#method-i-redirect_to [hotwired/turbo#649]: hotwired/turbo#649

Closes hotwired/turbo#257 Closes hotwired/turbo#397 Follow-up to hotwired/turbo#257 (comment) hotwired/turbo#257 (comment) Depends on hotwired/turbo#660 Introduces the `Turbo::Stream::Redirect` concern to override the [redirect_to][] routing helper. When called with a `turbo_frame:` option, the `redirect_to` helper with check whether the request was made with the Turbo Stream `Accept:` header. When it's absent, the response will redirect with a typical HTTP status code and location. When present, the controller will respond with a `<turbo-stream>` element that invokes [Turbo.visit($URL, { frame: $TURBO_FRAME })][hotwired/turbo#649] where `$URL` is set to the redirect's path or URL, and `$TURBO_FRAME` is set to the `turbo_frame:` argument. This enables server-side actions to navigate the entire page with a `turbo_frame: "_top"` option. Incidentally, it also enables a frame request to navigate _a different_ frame. Typically, an HTTP that would result in a redirect nets two requests: the first submission, then the subsequent GET request to follow the redirect. In the case of a "break out", the same number of requests are made: the first submission, then the subsequent GET made by the `Turbo.visit` call. Once the `Turbo.visit` call is made, the script removes its ancestor `<script>` by calling [document.currentScript.remove()][]. [redirect_to]: https://edgeapi.rubyonrails.org/classes/ActionController/Redirecting.html#method-i-redirect_to [hotwired/turbo#649]: hotwired/turbo#649 [document.currentScript.remove()]: https://developer.mozilla.org/en-US/docs/Web/API/Document/currentScript

marcelolx · 2022-08-04T12:46:48Z

src/core/streams/stream_message.ts

-    const fragment = document.createDocumentFragment()
-    for (const element of this.foreignElements) {
-      fragment.appendChild(document.importNode(element, true))
+    for (const inertScriptElement of streamElement.templateElement.content.querySelectorAll("script")) {


@seanpdoyle I think this breaks the current behavior we have with the remove action https://turbo.hotwired.dev/reference/streams#remove because the templateElement requires that the stream element contains a child element <template> which for this specific action is not the case

Thank you for raising this issue! I've opened #665 to resolve it.

Closes hotwired/turbo#257 Closes hotwired/turbo#397 Follow-up to: * hotwired/turbo#257 (comment) * hotwired/turbo#257 (comment) Depends on hotwired/turbo#660 Introduces the `Turbo::Stream::Redirect` concern to override the [redirect_to][] routing helper. When called with a `turbo_frame:` option, the `redirect_to` helper with check whether the request was made with the Turbo Stream `Accept:` header. When it's absent, the response will redirect with a typical HTTP status code and location. When present, the controller will respond with a `<turbo-stream>` element that invokes [Turbo.visit($URL, { frame: $TURBO_FRAME })][hotwired/turbo#649] where `$URL` is set to the redirect's path or URL, and `$TURBO_FRAME` is set to the `turbo_frame:` argument. This enables server-side actions to navigate the entire page with a `turbo_frame: "_top"` option. Incidentally, it also enables a frame request to navigate _a different_ frame. Typically, an HTTP that would result in a redirect nets two requests: the first submission, then the subsequent GET request to follow the redirect. In the case of a "break out", the same number of requests are made: the first submission, then the subsequent GET made by the `Turbo.visit` call. Once the `Turbo.visit` call is made, the script removes its ancestor `<script>` by calling [document.currentScript.remove()][]. [redirect_to]: https://edgeapi.rubyonrails.org/classes/ActionController/Redirecting.html#method-i-redirect_to [hotwired/turbo#649]: hotwired/turbo#649 [document.currentScript.remove()]: https://developer.mozilla.org/en-US/docs/Web/API/Document/currentScript

Closes hotwired/turbo#257 Closes hotwired/turbo#397 Follow-up to: * hotwired/turbo#257 (comment) * hotwired/turbo#257 (comment) Depends on hotwired/turbo#660 Introduces the `Turbo::Stream::Redirect` concern to override the [redirect_to][] routing helper. When called with a `turbo_frame:` option, the `redirect_to` helper with check whether the request was made with the Turbo Stream `Accept:` header. When it's absent, the response will redirect with a typical HTTP status code and location. When present, the controller will respond with a `<turbo-stream>` element that invokes [Turbo.visit($URL, { frame: $TURBO_FRAME })][hotwired/turbo#649] where `$URL` is set to the redirect's path or URL, and `$TURBO_FRAME` is set to the `turbo_frame:` argument. This enables server-side actions to navigate the entire page with a `turbo_frame: "_top"` option. Incidentally, it also enables a frame request to navigate _a different_ frame. Typically, an HTTP that would result in a redirect nets two requests: the first submission, then the subsequent GET request to follow the redirect. In the case of a "break out", the same number of requests are made: the first submission, then the subsequent GET made by the `Turbo.visit` call. Once the `Turbo.visit` call is made, the script removes its ancestor `<script>` by calling [document.currentScript.remove()][], and marking it with [data-turbo-cache="false"][] [redirect_to]: https://edgeapi.rubyonrails.org/classes/ActionController/Redirecting.html#method-i-redirect_to [hotwired/turbo#649]: hotwired/turbo#649 [document.currentScript.remove()]: https://developer.mozilla.org/en-US/docs/Web/API/Document/currentScript [data-turbo-cache="false"]: https://turbo.hotwired.dev/reference/attributes#data-attributes

seanpdoyle mentioned this pull request Jul 31, 2022

Activate scripts from turbo streams #527

Closed

seanpdoyle force-pushed the stream-renderer branch from 64cdbff to 73b38ce Compare July 31, 2022 21:16

seanpdoyle mentioned this pull request Jul 31, 2022

"Break out" of a frame from the server hotwired/turbo-rails#367

Open

dhh merged commit 97ce0d7 into hotwired:main Jul 31, 2022

seanpdoyle deleted the stream-renderer branch July 31, 2022 23:44

marcelolx reviewed Aug 4, 2022

View reviewed changes

marcelolx mentioned this pull request Aug 4, 2022

v7.2.0-beta.2 doesn't accept turbo streams of remove action without a template child element #664

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Activate `<script>` in Turbo Streams #660

Activate `<script>` in Turbo Streams #660

seanpdoyle commented Jul 31, 2022

marcelolx Aug 4, 2022

seanpdoyle Aug 4, 2022

Activate <script> in Turbo Streams #660

Activate <script> in Turbo Streams #660

Conversation

seanpdoyle commented Jul 31, 2022

marcelolx Aug 4, 2022

Choose a reason for hiding this comment

seanpdoyle Aug 4, 2022

Choose a reason for hiding this comment

Activate `<script>` in Turbo Streams #660

Activate `<script>` in Turbo Streams #660