search

matthewp / corset

Declarative data bindings, bring your own backend.
https://corset.dev/
BSD 2-Clause "Simplified" License
275 stars 2 forks source link

Lists break when existing nodes are in the list container? #170

Open jaredcwhite opened 2 years ago

jaredcwhite commented 2 years ago

I've been playing around with Corset, and there's lots to like here! I'm very much on board with the project philosophy. 👍👍

One thing I'm wondering: it would be great to be able to server-render out items in a list, and have that still work with the client bindings (assuming the data matches). Right now (in my testing at least), it seems that if a list container isn't empty, the bindings don't work. I don't seem to get any particular error, it just seems broken. If I manually wipe out the container ahead of mounting, then of course it's fine.

Here's an example of what I mean based on one of the Corset examples: https://codepen.io/jaredcwhite/pen/LYmQdyW

matthewp commented 2 years ago

I think you are saying you'd like to progressively enhance an existing list, right? This is definitely the hardest part to try and enhance. You could never do something like resort the list because the parts you have in JS are just the new items. Maybe we could have something like each-append: true that appends rather than replaces the elements children. I'll have to think more on this.

matthewp commented 2 years ago

Actually we already do append: https://github.com/matthewp/corset/blob/baf6ea682fb872bc83c2d9f874653cd4510a73b9/src/each.js#L44

so maybe there's just a bug here.

matthewp commented 2 years ago

Oh wait, looking at your example @jaredcwhite are you wanting the First Item in your JS to "take over" the First Item in your HTML?

jaredcwhite commented 2 years ago

Yeah, my thought is if list "state" is passed along both with prerendered HTML as well as in the JS and the two match, hydration should "just work" in a progressively-enhanced fashion. (Maybe easier said than done, but it'd be pretty cool!)

matthewp commented 2 years ago

Corset doesn't do hydration at all, though. It's not aware that the prerendered element is meant to be the same as the element that is produced from JS.

The desire to enhance lists is definitely reasonable of course. I just haven't figured out how yet. Non-lists parts are pretty straight forward, but lists are a tad tougher.

jaredcwhite commented 2 years ago

@matthewp Sure, I'm not expecting any sort of diff process or anything fancy. Hopefully just a way for it to hum along fine when the keys match once the sheet works its magic.