Note

The project is now in SourceHut. Please submit issues or requests via our Todo Page or via email.

Web Component Base

🤷‍♂️ zero-dependency, 🤏 tiny JS base class for creating reactive custom elements easily ✨

When you extend the WebComponent class for your component, you only have to define the template and properties. Any change in any property value will automatically cause just the component UI to render.

The result is a reactive UI on property changes.

There's a trade off between productivity & lightweight-ness here, and it is somewhere between Microsoft's FASTElement & Google's LitElement.

Links

• Documentation
• Main Repo at SourceHut
  • GitHub Mirror
  • ...more mirrors coming
• To Do
• Read a blog explaining the reactivity
• View demo on CodePen

Want to get in touch?

There are many ways to get in touch:

1. Email a ticket: ~ayoayco/wcb@todo.sr.ht
2. Submit via SourceHut todo
3. Start a GitHub discussion
4. Email me: ayo@ayco.io

Inspirations and thanks

Funny story how the project started: I was on a vacation with the family and did not bring my laptop. While in vacation, I took lots of videos and pictures and posted them on Instagram stories because that's where my friends & the rest of family are. Because it was a time that I was working on contributions to Elk, I thought: Hey wouldn't it be nice to post these Instagram-story-style (I'm a big fan of that UI) everywhere I can: Elk, my personal site, pixelfed maybe? But I have to build it framework-agnostic! How?

That's when I got into web components -- I had the idea in my head, without a laptop to work on it.

When I got back home, the first thing I did was study how it works starting from the vanilla way of extending from HTMLElement. But immediately I saw several boilerplate I don't want to write every time I need a custom element... and I naturally wrote my own base class.

After several iterations, the APIs got really interesting, and I posted about it on my social. Of course someone commented: "TAKE A LOOK AT THIS" (or something like that) and linked me to Lit's ReactiveElement. And then, I realized, woops HOW CAN I FORGET LIT EXISTS!?.

Anyway, here we are, I still don't have the Instagram-story-style component that started it all... because I felt the need to have a simple custom elements base class first... cursed hobby projects :)

I would like to thank the following

1. htm - I use it for the html function for tagged templates, and take a lot of inspiration in building the rendering implementation. It is highly likely that I will go for what Preact is doing... but we'll see.
2. fast - Somewhere in the middle, I found that Microsoft has their own base class (super cool!) and I thought: okay, I don't feel bad about forgetting Lit exists now
3. lit - you guys rock. lit-html continues to amaze me and I worked to make wcb generic so I (and others) can continue to use it