feat: Allow partials on every element

[marvinhagemeister]

There is a strong desire to expand support for partials to more scenarios. Fresh 1.5 shipped with partial support for navigation and https://github.com/denoland/fresh/pull/1930 landed recently in main that enables it for form elements. But there are lots of scenarios where you want to trigger a partial update based on an event. Like when changing the value of a select in a form or something. We need a way to allow that.

Something I was pondering about is whether we should introduce some sort of object syntax for events.

<select onChange={{ partial: "/foo/bar" }}>...</select>

// or maybe abstracted via a function
<select onChange={partialTrigger("/foo/bar")}>...</select>

I haven't yet decided what it should look like and open to ideas.

[adamgreg]

The abstracted via function idea seems most straightforward to me, and let's the user put extra JS in the handler if needed.

[marvinhagemeister]

@adamgreg The main thing I'm not sure how to solve is how would you send these functions to the browser when you add them outside of an island. Only thing I can think of is to serialize the function but that breaks if it captures variables via a closure.

[adamgreg]

Oh, that's a tricky one.

A general solution to serialising little handler functions to the client would be useful for other cases, if it's possible. Interestingly, Chrome DevTools lets you inspect a function's closure using console.dir() (but Firefox doesn't). Maybe it's something that could be exposed via a new Deno API?

[osddeitf]

@marvinhagemeister I don't really understand what you have said about "serialize the function" and "that breaks if it captures variables via a closure".

But there is my idea:

• I see there are 2 functions in src/runtime/entrypoints/main.ts:

  • applyPartials(res: Response)
  • fetchPartials(url: URL, init: RequestInit = {}).

• We can expose those 2 functions:

  • Make them as a separate entrypoint into esbuild.
  • Configure esbuild somehow to assign them to globals like window.__fresh_fetchPartials.
  • Write something like (so src/runtime/entrypoints/main.ts and islands may import):

  export const fetchPartials = window.__fresh_fetchPartials

  I would like to know your opinion about whether it's possible to do something like that. If so, I can work on making a PR to make it happens. I'm really like how Partial works, but I have yet to apply it to my project because of this constraint.