Override Frame response target from server #397

seanpdoyle · 2021-09-17T04:04:45Z

While it's still unclear how servers will persist a Turbo-Frame:
header override across destructive actions and the GET requests that
result from their 303 See Other responses, the client side concern is
more straightforward:

Whenever a response with a Turbo-Frame: _top header is handled by a
FrameController, propose a full-page Visit.

This commit adds test coverage for both <a> element initiated GET
requests, as well as <form> element initiated POST requests.

mrhead · 2021-11-02T17:43:50Z

src/core/frames/frame_controller.ts

-    await this.loadResponse(response)
-    this.resolveVisitPromise()
+    if (response.redirected && response.header("Turbo-Frame") == "_top") {
+      session.visit(response.location)


Please correct me if I'm wrong, but from my understanding, fetch automatically follows all redirects and gives us the latest GET response. Once Turbo detects the Turbo-Frame header in the latest response, it will visit the same URL again. This leads to duplicate requests, and it breaks Rails' flash messages.

So, instead of revisiting the latest URL, we should replace the whole page with the provided content.

That's a good point. In this case, we'd want to load the contents and still to translate the <turbo-frame>-level navigation into a page-wide Visit. I think we want to call session.visit(response.location, { response: { statusCode: response.statusCode, redirected: response.redirected, responseHTML: ... }) so that the Visit is in the session-level history, but does not result in an additional HTTP request.

hotwired#257 --- While it's still unclear how servers will persist a `Turbo-Frame:` header override across destructive actions and the `GET` requests that result from their `303 See Other` responses, the client side concern is more straightforward: Whenever a response with a `Turbo-Frame: _top` header is handled by a `FrameController`, propose a full-page Visit. This commit adds test coverage for both `<a>` element initiated `GET` requests, as well as `<form>` element initiated `POST` requests.

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

davidjr82 · 2022-08-01T06:03:57Z

@seanpdoyle shouldn't it be better to do it always there is no matching frame in the response, instead of doing it only when a header is set in the response? Just following the comment in this issue:

#257 (comment)

anyway, this is a good workaround because allow us to have a solution for a common case, thanks!

seanpdoyle · 2022-08-01T18:11:51Z

I'm closing this for now in favor of exploring other solutions like #445 and hotwired/turbo-rails#367.

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()][]. [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 Sep 17, 2021

Ability to override frame-target from server response #257

Open

seanpdoyle force-pushed the turbo-frame-redirect-top branch from 335df6e to 7a19454 Compare September 17, 2021 04:10

mrhead reviewed Nov 2, 2021

View reviewed changes

seanpdoyle force-pushed the turbo-frame-redirect-top branch from 7a19454 to 3eebb6e Compare November 2, 2021 18:30

seanpdoyle force-pushed the turbo-frame-redirect-top branch from 3eebb6e to 27eb4b0 Compare November 2, 2021 18:50

seanpdoyle marked this pull request as draft November 13, 2021 15:19

seanpdoyle mentioned this pull request Jul 31, 2022

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

Open

seanpdoyle closed this Aug 1, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Override Frame response target from server #397

Override Frame response target from server #397

seanpdoyle commented Sep 17, 2021

mrhead Nov 2, 2021

seanpdoyle Nov 2, 2021

davidjr82 commented Aug 1, 2022

seanpdoyle commented Aug 1, 2022

Override Frame response target from server #397

Override Frame response target from server #397

Conversation

seanpdoyle commented Sep 17, 2021

mrhead Nov 2, 2021

Choose a reason for hiding this comment

seanpdoyle Nov 2, 2021

Choose a reason for hiding this comment

davidjr82 commented Aug 1, 2022

seanpdoyle commented Aug 1, 2022