Add new partials mode “upsert”

[reeceorbuck]

Forgive me, this is my first ever pull request. I only have experience as a solo web developer, so this is outside my comfort zone.

I propose adding an additional mode for partials to complement replace, append, and prepend. At this stage I have called it upsert.

It functions similar to append, however each direct child node in the Partial update with a ‘key’ prop is compared to the direct children of the corresponding Partial already in the document. If a match is found, it will swap out that element, otherwise it will append the new node to the existing content.

I believe this has several use cases, the simplest I can think would be a todo list, where individual todo items can be sent to the client to populate a list, or update as they are modified, without using islands or any additional client side JavaScript. Another example, which is my specific use case, is that I need to update a list of recent chats in a messaging app as new messages arrive. Rather than send another copy of the entire list on each update, I can send just the individual item, which would feature an unread message badge. My current work around is using global state to maintain an array of the DOM nodes, and sending that list to the server with every request, in order to determine whether a message is coming from someone already in the recent list or not, so I don’t end up with duplicates.

If adding this additional mode is considered adding unnecessary complexity, then an alternative solution might be that both append and prepend would automatically substitute child nodes if a matching key is detected. Preact warns about having duplicate keys in component children already, but Fresh will currently not check this.

I am happy to take on feedback, both for this feature, as well as the correct etiquette for pull requests. Once I submit this I will create an issue and link it, because I think that’s what I supposed to do.

[reeceorbuck]

Further to this, I have been trying to understand the code within the reviver.ts file with regards to partials modes, as it seems to be a somewhat similar process to what happens within the revivePartials function in the partials.ts file.

Best I can tell, the relevant "partial modes" code only gets hit if a partials response from the server contains a partial nested inside another partial. It builds the entire outer partial with all the partial children as well (and in case of the append/prepend modes- it grabs the existing document children from the page here), then appends that to the document in one go.

So at this stage I can't seem to figure out how to include the 'upsert' mode into this code, without including bugs (for example, if there were three layers of nested partials).

In any case, I would suggest that the 'upsert' mode be limited to top level "optimized" partial nav responses, since it is by design supposed to make the response as small as possible anyway.