wcb/size-change-log.md
Ayo c7d87086a2
Some checks are pending
Tests / Unit (push) Waiting to run
Tests / E2E (push) Waiting to run
feat: smart diffing
2026-07-19 23:32:19 +02:00

5.9 KiB

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.
Derive prop types from defaults only; log type violations instead of throwing (+ static strictProps opt-in) 1.33 kB (+0.02 kB) 1.35 kB Loud, not fatal. The proxy setter locked a prop's type on first write and threw on mismatch; inside attributeChangedCallback that TypeError vanished into window.onerror and silently skipped rendering. Types are now taken from static props defaults only (undeclared props stay untyped), and a declared-type violation is logged via console.error and skipped so render()/onChanges() still run. Teams wanting hard enforcement can set static strictProps = true to restore throwing.
Correct empty-string / removed attribute handling; drop native-setter writes 1.33 kB (≈0) 1.35 kB State no longer corrupts on common attribute changes. attr="" coerced to boolean true (echoed as attr="true"); removeAttribute wrote null into the proxy and threw before render()/onChanges(); deserialize('', 'number') threw. attributeChangedCallback now keeps strings as-is ('' stays ''), resets removed attributes to the declared default, wraps deserialize so a malformed value falls back to the raw string instead of skipping render, and no longer writes vestigial this[prop] fields that clobbered native setters like title/id/lang. Logic swap — no net size cost.
onChanges gains a clear attribute-vs-property distinction (breaking) 1.34 kB (+0.01 kB) 1.35 kB Self-documenting change payload. onChanges previously passed only property, holding the kebab-case attribute name — confusing in a library where props are camelCase. property now holds the camelCase prop key (matching this.props access) and the kebab attribute name moves to a new attribute field. Handlers can read this.props[property] directly without re-deriving the key. Breaking: code reading changes.property for the attribute name must switch to changes.attribute (see the migration note on the life-cycle-hooks docs page).
Buffer attribute-driven render/onChanges until after onInit 1.35 kB (+0.01 kB) 1.35 kB onInit is guaranteed to run first. Per spec, authored attributes fire attributeChangedCallback (→ render/onChanges) before connectedCallback, so components that assume onInit already ran break in real browsers (happy-dom hides this). A #connected flag now buffers the render/onChanges side effects until after onInit, while the prop value is still applied immediately so props is correct inside onInit. Pre-connect changes are reflected by the first render and not replayed through onChanges.
Reconcile render() in place instead of replaceChildren (WCB-REQ-06) 1.81 kB (+0.43 kB) 1.4 → 1.85 kB Re-renders no longer destroy DOM state. The vnode path rebuilt the whole subtree and swapped it on every prop change, so focus, caret/selection, an uncommitted <input> value, :hover and running CSS transitions were wiped on the component's own rendered nodes — text fields lost focus mid-typing and a segmented control lost keyboard focus on select. Re-renders now reconcile the existing DOM against the new vnode tree in place (src/utils/patch.mjs: index-based, non-keyed — reuse same-tag elements, patch prop/attr adds, changes and removals by the same rule createElement applies, recurse children, trim extras). The first render still builds via createElement, the JSON.stringify no-op skip is unchanged, and html's vnode shape and string templates are untouched. Reusing an element also means a style rule that is dropped or goes falsy ({ fontStyle: condition && 'italic' }) must now be cleared explicitly — a rebuild used to do that implicitly. The reconciler lives in its own zero-dep module, but size-limit measures each entry with its dependencies, so the core budget had to move regardless; no runtime dependency was added.