Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
jaredcwhite opened this issue Sep 28, 2022 · 6 comments
Open

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

jaredcwhite opened this issue Sep 28, 2022 · 6 comments
Labels
enhancement New feature or request New concept Issues that need some sort of new concept, the solution be unknown at this time

Comments

@jaredcwhite
Copy link

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
Copy link
Owner

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
Copy link
Owner

Actually we already do append:

this.host.append(this.start);

so maybe there's just a bug here.

@matthewp
Copy link
Owner

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
Copy link
Author

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
Copy link
Owner

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
Copy link
Author

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

@matthewp matthewp added New concept Issues that need some sort of new concept, the solution be unknown at this time enhancement New feature or request labels Oct 20, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request New concept Issues that need some sort of new concept, the solution be unknown at this time
Projects
None yet
Development

No branches or pull requests

2 participants