| .husky | ||
| .vscode | ||
| assets | ||
| docs | ||
| examples | ||
| src | ||
| test | ||
| vendors/htm | ||
| .gitignore | ||
| .npmignore | ||
| .prettierignore | ||
| AGENTS.md | ||
| eslint.config.mjs | ||
| LICENSE | ||
| netlify.toml | ||
| package.json | ||
| pnpm-lock.yaml | ||
| pnpm-workspace.yaml | ||
| prettier.config.mjs | ||
| README.md | ||
| size-change-log.md | ||
| tsconfig.json | ||
| vitest.config.mjs | ||
Web Component Base
Note
What's next: correctness fixes. Thanks to feedback from teams building on WCB, our immediate focus is a set of state-corruption fixes: no attribute writes in the constructor, correct handling of empty-string and removed attributes (so
render()/onChangesare never silently skipped), removing the props proxy's first-write type lock, and safe cloning ofstatic propsdefaults. Detailed issues will follow.
🤷♂️ 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.
Links
Want to get in touch?
There are many ways to get in touch:
- Open a GitHub issue or discussion
- Submit a ticket via SourceHut todo
- Email me: hi@ayo.run
Inspirations and thanks
- htm - I use it for the
htmlfunction 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. - fast - When I found that Microsoft has their own base class I thought it was super cool!
- lit -
lit-htmlcontinues to amaze me and I worked to makewcbgeneric so I (and others) can continue to use it
Size change log
See size-change-log.md for a running record of how each correctness/feature change affects the WebComponent base class bundle size, with the reason and benefit of each.
Just keep building.
A project by Ayo