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 #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.

[mediaformat]

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.

It sounds like this is an issue with the way the example was implemented. So in OP this should use buttons rather than links.
Am I understanding that correctly?

But then, I'm also wondering what would be the use cases where one would want/expect to see a plain partial? Or is that the bug part?

(I'm new to this island/partial stuff, so sorry if I'm missing parts!)

[shvgn]

Hi. I'm playing with partials, too. I noticed that f-partial used on buttons and forms redirect on the partials route (/partial/search in my case) while a element works just fine, but that's not a form on the other hand. Form action gives no effect.

Code

export default function Page({ data }: PageProps<Data>) {
  const { results, query } = data;
  return (
    <div f-client-nav class="flex gap-4">
      <Partial name="search">
        <main class="p-4">


          {/* f-partial is here  ↓↓↓↓↓↓↓↓↓ */}
          <form action="/search" f-partial="/partials/search"  class="flex gap-2" >
            <input type="search" name="q" value={query} class="border-2 px-1" />
            <button type="submit" class="bg-lime-700 text-white px-2 rounded" > Search </button>
          {/* f-partial in the button gives the same effect ↑↑↑↑↑ */}
          </form>
          <ul>
            {results.map((name) => <li key={name}>{name}</li>)}
          </ul>
        </main>
      </Partial>

      <aside class="p-4">
        <p>Suggestions</p>
        <ul>
          
          {/* suggestions work fine  */}
          <li> <a href="/search?q=ve" class="link" f-partial="/partials/search?q=ve"> ve </a> </li>
          <li> <a href="/search?q=a" class="link" f-partial="/partials/search?q=a"> a </a> </li>
          <li> <a href="/search?q=v" class="link" f-partial="/partials/search?q=v"> v </a> </li>
        </ul>
      </aside>
    </div>
  );
}

Screenshot

[SYip]

I created a discusstion related to this: #2779

It would be something similar to AJAX, but instead of returning json data, the server return an island and replace the form html with it. The url shouldn't be updated.