Hi Everyone! My main motivation for making this was that I wanted something as powerful as Svelte or React but I wanted no build steps, no JSON API, and I wanted something as close to vanilla js as much as possible. I'm mainly a backend developer, and I wanted to simply return html with some interactive islands when I need to (whose components get 'hydrated' with by backend language's templates).<p>Some key ideas:<p>• It's centered around light dom web components
• Uses a "reactive element", which uses observables for fine-grained reactivity
• Rendering is done through lit-html's tagged templates
• A pub/sub store
• Easy immutability using immer (it powers the observable updates & also the reducers)<p>It's my first 'serious' library that I'm using in some work prototypes, and it's also my first 'real' open source project, so comments & feedback would be great!
Nice work, love the use of reactivity via observables and pub/sub stores (<i>some of my favourite abstractions</i>)<p>Some feedback from first glance is “type inference” could be better, which would help prevent a lot of foot-guns. Consider the example code here:<p><pre><code> this.count = this.observable(0);
</code></pre>
Does this allow “count” to be inferred as a “number” type in the rest of the code? There might be a way to allow JS to easily infer the types, without requiring a build step…
Looks good! FWIW I always felt the observable pattern much more intuitive than the redux/reducer style. Something like <a href="https://mobx.js.org/" rel="nofollow noreferrer">https://mobx.js.org/</a><p>Things get hairy in both, but redux pattern feels so ridiculously ceremonial all to effectively manage a huge global state object with a false sense of "purity".<p>Observables otoh say "fuck it, I'm mutating everything, do what you want with it".
Great to see the interest growing around native Web Components. I've been working on a no-code (markup only) platform which is also based on web components.<p><a href="https://saasufy.com/" rel="nofollow noreferrer">https://saasufy.com/</a><p>I built a whole chat app with authentication, blockchain and GitHub login with just 120 lines of HTML markup no front end or backend code (all the logic is abstracted away via generic, easy-to-use components provided by the platform).<p>You can also build apps which display filtered views by category or with text search with custom parameters and it does so efficiently with indexing and all updates in real time. Real time updates are delivered efficiently only to relevant components. Components automatically subscribe and unsubscribe to and from realtime changefeeds in an efficient way. Access control can be specified at the object/model level or on individual fields.
lit-html author here. I'm glad the template library is useful for you!<p>Question regarding interop with other web components: I don't see how to create reactive properties on elements. Can they receive data from parents via property bindings? Ie, could a Lit element pass data to a Cami element?
Nice work! I have a no-dependencies project with somewhat similar goals in frameable/el[0], which takes more inspiration from Vue in its interface.<p>WebComponents give us so much, but just not quite enough to be usable on their own without a little bit more on top. Reactivity with observable store and templating with event binding are the big missing pieces.<p>[0]: <a href="https://github.com/frameable/el">https://github.com/frameable/el</a>
This seems like a great candidate for the few instances in my HTMX projects when it'd be a pain in the ass to write endpoints that enumerate every possible client-side state. I would love to see somebody put the two together and report on how they get along.
I see many points in common with <a href="https://www.arrow-js.com/" rel="nofollow noreferrer">https://www.arrow-js.com/</a> Probably that focus on components could be the only difference
I also created a webcomponent-based framework two months ago: <a href="https://realm.codes" rel="nofollow noreferrer">https://realm.codes</a>
How does this compare with <a href="https://github.com/preactjs/preact">https://github.com/preactjs/preact</a>?