ayo/wcb
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 5
Web Components in Easy Mode https://webcomponent.io
491 commits 2 branches 119 tags 4.2 MiB
JavaScript 99%
TypeScript 1%
Find a file
Ayo 394e094693 fix: safer prop clone w/ define-time validation 
- This implements clear errors & warnings when non-serializeable values are assigned to properties
- Adjusts the size limit budget to allow better messages
- Updates references to size limits
2026-07-05 10:49:16 +02:00
.husky chore: no mirror; just push 2026-02-23 22:57:46 +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 fix: safer prop clone w/ define-time validation 2026-07-05 10:49:16 +02:00
examples feat(docs): add guide for shadow dom & constructable stylesheets 2025-03-30 12:14:56 +02:00
src fix: safer prop clone w/ define-time validation 2026-07-05 10:49:16 +02:00
test fix: safer prop clone w/ define-time validation 2026-07-05 10:49:16 +02: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
AGENTS.md chore: initialize agent instructions 2026-07-05 07:27:17 +02:00
eslint.config.mjs chore: fix lint issues 2026-03-11 22:38:23 +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 fix: safer prop clone w/ define-time validation 2026-07-05 10:49:16 +02:00
pnpm-lock.yaml chore(docs): upgrade to astro 6 2026-05-08 15:34:11 +02: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 fix: safer prop clone w/ define-time validation 2026-07-05 10:49:16 +02:00
tsconfig.json chore: add rootDir in tsconfig 2026-05-08 14:44:20 +02:00
vitest.config.mjs test: cover current behavior 2026-07-05 09:37:08 +02:00

README.md

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()/onChanges are never silently skipped), removing the props proxy's first-write type lock, and safe cloning of static props defaults. Detailed issues will follow.

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: hi@ayo.run

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

Size change log

A running record of how each correctness/feature change affects the WebComponent base class bundle, measured as min + brotli via size-limit. Baseline before the Phase 0 correctness work: 1.19 kB (limit 1.2 kB).

Change Size (min+brotli) Limit Reason & benefit
Move default-attribute reflection out of the constructor ~1.19 kB (≈0) 1.2 kB Custom Elements Spec compliance. Constructors may not mutate attributes, so document.createElement on a class with static props threw NotSupportedError in real browsers. Defaults now reflect on first connect, and markup/SSR-provided attributes win. Pure code movement — no net size cost.
Safe prop cloning (functions/instances) + define-time validation 1.31 kB (+0.12 kB) 1.2 → 1.35 kB No more DataCloneError. structuredClone of a function/class-instance default crashed construction. Defaults are now cloned per key (plain data deep-copied so instances don't share object/array state; non-cloneable values kept by reference), and a one-time warning names any default whose type can't reflect to an attribute. Limit raised to fit.

Just keep building.
A project by Ayo