ciampo / macro-carousel

Carousel as a Vanilla Web Component.
https://ciampo.github.io/macro-carousel/demo/
MIT License
77 stars 6 forks source link

Lit-element and typescript #50

Open andreabosman16 opened 4 years ago

andreabosman16 commented 4 years ago

Maybe use lit-element as render engine and use typescript so everything is type safe. I wanted to use this component with lit-element and redux but got errors, this is because the component uses different setters and getters. These getters and setters conflict with how lit-element handles getting and setting html attributes. I think typescript and lit-element will make maintaining this component allot easier.

ciampo commented 4 years ago

Hey @andreabosman16 , thank you for letting me know about your usecase!

I am well aware of lit-html and lit-element, but I always wanted this to be a vanilla Web Component with no dependencies. Regarding Typescript, it's something that I considered, but never thought was really necessary — I have written tests to check types and other potential errors.

I don't see anything wrong with the current setters / getters; they should just be an implementation detail of the properties and attributes of this component.

Can you share with me a sample codepen / codesandbox sketch with your macro-carousel + lit-element + redux setup? I'll have a look at the errors and see what needs to be done to make it work

phatdunny commented 3 years ago

I'm having a similar issue - lit-html doesn't like this component. Usually that happens when there's a syntax error in your html is wrong, rather than JS or CSS - e.g. you've opened a tag, but haven't closed it. I'll see if I can track down the issue if I get time. Other than that, I'm loving your component - great job! Appreciate the endeavor to keep it vanilla, but lit-html is pretty sweet - if you get a chance. I probably wouldn't recommend lit-element though.

ciampo commented 3 years ago

Hey @phatdunny , thank you for reaching out — I'm glad you like the component!

I did have a look at lit-html and I quite like it, but I don't think it fits in the scope of this project. I may reconsider this if/when I'll work on a v2 of the component (at that point, I may also consider using TypeScript and/or other technologies)

For the purpose of this issue, it would be great if you could help with the lit-html errors — at least with a way of reproducing the errors consistently!