ayo/wcb
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
Web Components in Easy Mode https://webcomponent.io
465 commits 1 branch 105 tags 2.4 MiB
JavaScript 100%
Find a file
ayo c0b3350bd2
chore: housekeeping (#55) 
* chore: remove lit & fast reference in readme

* chore: remove sourcehut build automation

* chore(docs): various changes

* chore: update attribution
2025-06-07 23:35:36 +02:00
.husky chore: add build step in precommit 2025-03-23 11:55:02 +01:00
.vscode chore: format code 2024-12-19 22:43:12 +01:00
assets chore: add todo-app example on readme 2023-12-27 22:11:59 +01:00
docs chore: housekeeping (#55) 2025-06-07 23:35:36 +02:00
examples feat(docs): add guide for shadow dom & constructable stylesheets 2025-03-30 12:14:56 +02:00
src feat: show error when has styles & not using shadow roots 2025-03-30 12:46:43 +02:00
test test: organize test files 2025-03-22 10:14:35 +01:00
vendors/htm chore: publish dist from root dir (#32) 2023-12-18 23:12:18 +01:00
.gitignore test: set up vitest & add tests 2025-03-22 10:11:48 +01:00
.npmignore chore: publish dist from root dir (#32) 2023-12-18 23:12:18 +01:00
.prettierignore chore: set up prettier ignore 2024-12-27 11:10:32 +01:00
eslint.config.mjs chore: ignore dist/* on eslint config 2025-03-22 11:38:24 +01:00
LICENSE chore: add LICENSE file 2023-11-10 21:56:12 +01:00
netlify.toml feat: replace mcfly site with starlight docs 2025-03-26 21:10:27 +01:00
package.json 4.1.1 2025-03-30 12:47:26 +02:00
pnpm-lock.yaml chore: remove mcfly deps 2025-03-26 22:10:31 +01:00
pnpm-workspace.yaml feat: replace mcfly site with starlight docs 2025-03-26 21:10:27 +01:00
prettier.config.mjs chore: use .mjs config files 2024-12-19 23:16:57 +01:00
README.md chore: housekeeping (#55) 2025-06-07 23:35:36 +02:00
tsconfig.json chore: set tsc target to ES2022 2025-03-22 11:38:03 +01:00
vitest.config.mjs test: set up vitest & add tests 2025-03-22 10:11:48 +01:00

README.md

Web Component Base

Package information: NPM version Package information: NPM license Package information: NPM downloads Bundle Size

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

counter example code snippet

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:

  1. Open a GitHub issue or discussion
  2. Submit a ticket via SourceHut todo
  3. Email me: ayo@ayco.io
  4. Chat on Discord: Ayo's Projects

Inspirations and thanks

  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 - When I found that Microsoft has their own base class I thought it was super cool!
  3. lit - lit-html continues to amaze me and I worked to make wcb generic so I (and others) can continue to use it

Just keep building.
A project by Ayo