pawelgrzybek / siema

Siema - Lightweight and simple carousel in pure JavaScript
https://pawelgrzybek.github.io/siema/
Other
3.48k stars 408 forks source link

Adds option to preserve original childNodes to use on destroy (lit html compatibility) #263

Closed pedelman closed 3 years ago

pedelman commented 4 years ago

Hello and thanks for writing an awesome and lightweight carousel library.

I have been working to see if I can integrate this library into lit-html and ran into some issues with how the destroy method restores nodes in the dom.

Lit-html uses html comments so it can track which sections of the dom are templated so it can efficiently re-render. In order for this to work seamlessly, I planned to use destroy function to restore the markup to the state before the carousel was initialized. However I noticed that HTML comments are not preserved and this will cause an issue for lit-html.

I consider this code to be prototype level, I have added a new option to make sure the changes are backward compatible (however this change may be safe to do regardless). Basically I preserve the original childNodes on initialization and can use them again later when destroying the carousel. Using this code, I was able to get lit-html integrated to Siema.

Links:

pawelgrzybek commented 4 years ago

Ooo! Today I learned. I am aware of lit-html but I have never used it before. Thanks for implementation. I have to prioritise moving project to TypeScript as so many people requested this one and we will reconsider this feature after TS refactor. Are you ok with it?

Thanks for very good contribution to the project! Have a lovely day 🥑

pedelman commented 4 years ago

@pawelgrzybek thanks for the note, I am in no rush, I would also love to see a TS refactor :).

Thanks and feel free to ping me in future if you need someone to help test or code review!