Homepage partials example gets weird with the refresh button.

[mmcc]

This is probably low priority, but figured I would call it out. I was playing with the partials examples while reading the docs, then wanted to reset the example so I refreshed. If you refresh you're now just sitting in the raw HTML of the example, and the back button will now cycle through the other ones you clicked.

Here's a stream.new recording of what I'm seeing

Or, as a gif:

[marvinhagemeister]

Good catch, we should fix that

[Sleepful]

It also breaks the URL history. Hitting the backwards button on the browser after clicking through some partials will yield the same result as mentioned above.

Is there a way to use partials without the redirect? Most of the time I just want to get some feedback from the server in HTML form, without any kind of redirect. If I want a redirect then I can set the headers myself on the server.

[Sleepful]

Here is a quick and dirty way around it, if you are using a <form> that creates a POST request and potentially retrieves a Partial, redirecting GET requests to a standard location makes it less jarring when using the refresh/backwards button on the browser.

export const config: RouteConfig = {
  skipAppWrapper: true, // Skip the app wrapper during rendering
};

export const handler: Handlers<unknown, State> = {
  GET(_req, _ctx) {
    // Currently it can't be avoided that Partials create a new URL in browser history, which is strange
    // when using the backwards and/or refresh button in the browser. To compensate, manually redirect GET requests.
    return new Response("", {
      status: 307,
      headers: { Location: "/" },
    });
  },

  async POST(req, ctx) {
    ctx.render() // renders the partial
  }

Caveat: anchor tags still want to use a GET request so that's more difficult to redirect server-side.

I believe the ideal would be to be able to avoid any kind of client-side URL history with an attribute or similar. For example:

<form f-partial="/some/partial" redirect-client="false">

If you like this idea, I would be happy to implement it and submit a PR, just LMK. 😄

[marvinhagemeister]

Fresh will always redirect when using links. It doesn't redirect when using plain buttons without a form when the button has the f-partial attribute.

[Sleepful]

True, it makes sense that links redirect.

For <form> submissions the URL in the action attribute should take precedence over f-partial, right? In which case, if I don't want the submission to change the URL then I just give it the current URL on the action attribute.

I found this https://github.com/denoland/fresh/issues/2409 but I suppose I don't have it in my Fresh release right now.

[dandv]

Just saw this too accidentally after I played with the partials example, quit the browser, then restarted it so the page reloaded at the partial URL, https://fresh.deno.dev/recipes/lemon-honey-tea.