search

hybridsjs / hybrids

Extraordinary JavaScript UI framework with unique declarative and functional architecture
https://hybrids.js.org
MIT License
3.04k stars 85 forks source link

Use lit-html internally #11

Closed DavideCarvalho closed 6 years ago

DavideCarvalho commented 6 years ago

Instead of having your own html template literal, maybe it would be better if hybrids used a famous lib for it. It would help people when looking for documentation about how to write it. Lit-html is backed by polymer as well, and its html and render api are already stable.

smalluban commented 6 years ago

lit-html is still in rapid development. They recently merged core and extended library, changed syntax, etc. In the time when I was creating template engine (from March to May) it was really different, and in my opinion really confusing. They had a lot of issues about how to use it, or that people does not understand why something was not working (like missing the fact of extended version, which had to be used).

The main reason behind creating own implementation was a different public API. The hybrids solution favors using element context as a main argument of event listeners, gives a user full power without need to use additional tools (as directives for class and style introduced lately in lit).

However, as the hybrids is very flexible library, there is nothing to stops you from using lit-html with the library. The only thing you have to do is a little wrapper over render factory, as the html method in lit returns TemplateResult, not an update function.

smalluban commented 6 years ago

Is there anything else I can help you with this subject your welcome to ask :). If no, I will close the issue.

dredzone commented 5 years ago

Can you provide an example how lit-html or hyperhtml render can be used instead of default?

smalluban commented 5 years ago

Sure!

https://stackblitz.com/edit/hybrids-lit-html-counter?file=lit-counter.js

Instead of passing directly template result (using the built-in engine), for lit, you simply wrap a function with lit() function and use html from lit-html. For simplicity, it is re-exported in the wrapper file - lit.js.

I put some comments to explain why something is done in that or another way. Some of the API differences force to not use destructuring and require passing context to the event listener.

dredzone commented 5 years ago

very helpful, thanks for quick response.