Skip to content

Settle whether @component() needs to copy the inherited config - #832

Merged
titouanmathis merged 2 commits into
mainfrom
refactor/v4-component-decorator-config
Aug 16, 2026
Merged

titouanmathis merged 2 commits into
mainfrom
refactor/v4-component-decorator-config

Conversation

@titouanmathis

Copy link
Copy Markdown
Contributor

#823 left a note on @component(): value.config = { ...value.config, ...config } copies a parent's config onto the child as its own, and resolveConfig() already merges config along the prototype chain, so the copy looked redundant. Three other PRs were touching decorators.ts at the time. They have merged, so here is the answer.

It is not redundant. The code stays, with a comment saying why.

The evidence

Four specs in decorators.spec.ts, written against the current code, then re-run against value.config = config (the copy removed). Only one of them changes.

The copy adds no value to the merged config. A subclass whose own config carries the inherited keys and one whose own config carries only the declared keys resolve to the same refs union, the same options, the same components, and the same inherited mountStrategy. resolveConfig() collects only Object.hasOwn(current, 'config') levels and merges them, which is exactly the work the copy duplicates. This spec passes either way.

The copy is what keeps the class recognisable. isBaseConstructor() reads config.name straight off the class. It cannot call resolveConfig() — that lives in Base, which imports the brand. A class with no own config passes the check because it reads its parent's through the prototype chain. A decorated one only passes because the decorator carried the inherited name into the config it wrote.

What would have broken

The case is a config written without a name. BaseConfig requires one, so TypeScript catches it; untyped sources reach it by extending a component and adding config without renaming — the exact case #823 made register under the inherited name:

@component({ name: 'Parent', options: { one: String } })
class Parent extends Base {}

@component({ options: { two: String } })  // no rename
class Child extends Parent {}

Without the copy, Child.config is { options: { two: String } }. resolveConfig() still resolves the name to Parent, so the class registers and mounts and collides loudly — but isBaseConstructor(Child) is now false, and the three places that ask reject it:

  • registerFamily() — a config.components entry warns component.invalid-family-declaration and is dropped
  • @on(Child, 'event') — throws TypeError
  • resolveComponentClass() — a lazily imported module "did not resolve to a component class"

A class that registers and mounts, but that no parent can declare and no handler can target. The copy is one shallow spread standing between the decorator and that split.

One defect found, not fixed here

Declaring both @component({...}) and static config = {...} on the same class silently drops everything the decorator declared: static field initializers run after class decorators, so the field replaces the decorator's write wholesale. The last spec pins which one wins so the loss is at least known. Fixing it means moving the write into context.addInitializer(), which runs after the static fields — a change to when a class's config exists, not a cleanup, so it is not folded in here.

npm run lint, npm run lint:types, npm run test:v4 (1078 passing) and npm run check:package are green.

🤖 Generated with Claude Code

https://claude.ai/code/session_011nNdFD3aQhzfdm3EsCSbS9

titouanmathis and others added 2 commits August 16, 2026 18:45
`@component()` writes `{ ...value.config, ...config }`, so a class with no own
static `config` copies its parent's keys down. #823 left it alone as probably
redundant, because `resolveConfig()` already merges the prototype chain.

Three differential specs settle it. The merged config is identical whether the
own config carries the inherited keys or not, so the copy is redundant for
every value. It is not redundant for `isBaseConstructor()`, which reads
`config.name` straight off the class: a config written without a name — what an
untyped subclass adding config to its parent's produces — leaves the class
registered under the name it inherited yet rejected by every brand check.

A fourth pins which config wins when a class declares both the decorator and a
static field: the field, because its initializer runs after class decorators.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_011nNdFD3aQhzfdm3EsCSbS9
The copy adds nothing to the merged config, so the next reader will reach for
it again. Name the one thing it carries — the inherited `config.name` that
`isBaseConstructor()` reads off the class — and the three call sites that
refuse a class without it.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_011nNdFD3aQhzfdm3EsCSbS9
@github-actions

Copy link
Copy Markdown

Export size

Bundled per export with peer dependencies left external, dynamic imports excluded and the output minified; sizes are gzipped.

✅ No export size changes.

Unchanged (388)

@studiometa/js-toolkit

Export Size (gzip) Diff
(barrel) 17.44 kB
AbstractService 598 B
Base 9.06 kB
ComponentLoader 2.31 kB
DEFAULT_DIAGNOSTIC_PREFIX 102 B
DragService 2.02 kB
IDLE_TIMEOUT 57 B
KeyService 935 B
LoadService 666 B
MutationService 849 B
PointerService 1.13 kB
RafService 1020 B
ResizeService 1.12 kB
ScrollService 1.36 kB
VISIBLE_ROOT_MARGIN 72 B
autoload 2.4 kB
closestComponent 419 B
composeManifests 119 B
createApp 996 B
defineFeatures 326 B
defineManifest 512 B
fromMetaGlob 228 B
fromWebpackContext 131 B
getClosestParent 197 B
getDirectChildren 202 B
getInstanceFromElement 125 B
getInstances 187 B
getScopedGroups 104 B
importOnInteraction 926 B
importOnMediaQuery 243 B
importWhenIdle 225 B
importWhenPrefersMotion 271 B
importWhenVisible 935 B
isDirectChild 218 B
logTree 551 B
queryComponent 594 B
queryComponentAll 601 B
readEagerTokens 201 B
registerComponent 305 B
registerComponents 356 B
registerManifest 2.87 kB
registerManifests 2.89 kB
useDrag 2.05 kB
useKey 943 B
useLoad 676 B
useMutation 876 B
usePointer 1.15 kB
useRaf 1 kB
useResize 1.13 kB
useScroll 1.36 kB
utils 10.05 kB
utils/Queue 269 B
utils/SmartQueue 440 B
utils/addClass 240 B
utils/addStyle 239 B
utils/animate 3.34 kB
utils/boundingRectToCircle 206 B
utils/cache 208 B
utils/camelCase 405 B
utils/clamp 98 B
utils/clamp01 114 B
utils/collideCircleCircle 129 B
utils/collideCircleRect 192 B
utils/collidePointCircle 128 B
utils/collidePointRect 122 B
utils/collideRectRect 128 B
utils/createEaseInOut 123 B
utils/createEaseOut 91 B
utils/createElement 635 B
utils/createLocalStorage 1.32 kB
utils/createLocalStorageProvider 296 B
utils/createMemoryStorageProvider 174 B
utils/createNoopProvider 128 B
utils/createRange 115 B
utils/createSessionStorage 1.32 kB
utils/createSessionStorageProvider 288 B
utils/createStorage 1.3 kB
utils/createUrlSearchParamsInHashProvider 461 B
utils/createUrlSearchParamsInHashStorage 1.35 kB
utils/createUrlSearchParamsProvider 429 B
utils/createUrlSearchParamsStorage 1.34 kB
utils/damp 106 B
utils/dashCase 404 B
utils/debounce 122 B
utils/domScheduler 310 B
utils/ease 519 B
utils/easeInCirc 285 B
utils/easeInCubic 287 B
utils/easeInExpo 286 B
utils/easeInOutCirc 288 B
utils/easeInOutCubic 289 B
utils/easeInOutExpo 288 B
utils/easeInOutQuad 288 B
utils/easeInOutQuart 289 B
utils/easeInOutQuint 289 B
utils/easeInOutSine 288 B
utils/easeInQuad 285 B
utils/easeInQuart 286 B
utils/easeInQuint 286 B
utils/easeInSine 285 B
utils/easeLinear 77 B
utils/easeOutCirc 286 B
utils/easeOutCubic 288 B
utils/easeOutExpo 286 B
utils/easeOutQuad 286 B
utils/easeOutQuart 286 B
utils/easeOutQuint 286 B
utils/easeOutSine 286 B
utils/endsWith 128 B
utils/fold 168 B
utils/getAncestorWhere 123 B
utils/getAncestorWhereUntil 148 B
utils/getComponentResolver 140 B
utils/getOffsetSizes 194 B
utils/hasWindow 88 B
utils/historyPush 524 B
utils/historyReplace 526 B
utils/inertiaFinalValue 169 B
utils/isArray 63 B
utils/isBoolean 78 B
utils/isDefined 75 B
utils/isDev 78 B
utils/isEmpty 206 B
utils/isEmptyString 108 B
utils/isFunction 79 B
utils/isNull 68 B
utils/isNumber 91 B
utils/isObject 108 B
utils/isString 77 B
utils/keyCodes 122 B
utils/lerp 84 B
utils/loadElement 220 B
utils/loadIframe 241 B
utils/loadImage 241 B
utils/loadLink 237 B
utils/loadScript 251 B
utils/localStorageProvider 839 B
utils/lowerCase 404 B
utils/map 93 B
utils/matrix 136 B
utils/mean 126 B
utils/memo 130 B
utils/memoize 228 B
utils/memoryStorageProvider 843 B
utils/nextFrame 179 B
utils/nextMicrotask 133 B
utils/nextTick 148 B
utils/noop 62 B
utils/noopValue 76 B
utils/objectToURLSearchParams 322 B
utils/pascalCase 407 B
utils/random 93 B
utils/randomInt 113 B
utils/randomItem 234 B
utils/removeClass 242 B
utils/removeStyle 243 B
utils/round 95 B
utils/saveActiveElement 92 B
utils/scrollTo 2.31 kB
utils/sessionStorageProvider 838 B
utils/smoothTo 476 B
utils/snakeCase 406 B
utils/spring 154 B
utils/startsWith 125 B
utils/throttle 125 B
utils/toggleClass 242 B
utils/transform 347 B
utils/transition 1010 B
utils/trapFocus 441 B
utils/tween 1.72 kB
utils/untrapFocus 120 B
utils/upperCase 404 B
utils/urlSearchParamsInHashProvider 845 B
utils/urlSearchParamsProvider 839 B
utils/useScheduler 309 B
utils/wait 103 B
utils/withLeadingCharacters 135 B
utils/withLeadingSlash 142 B
utils/withTrailingCharacters 135 B
utils/withTrailingSlash 142 B
utils/withoutLeadingCharacters 122 B
utils/withoutLeadingCharactersRecursive 165 B
utils/withoutLeadingSlash 133 B
utils/withoutTrailingCharacters 122 B
utils/withoutTrailingCharactersRecursive 165 B
utils/withoutTrailingSlash 133 B
utils/wrap 122 B
version 56 B
withBreakpointManager 1.54 kB
withBreakpointObserver 1.71 kB
withDrag 2.18 kB
withExtraConfig 163 B
withFreezedOptions 187 B
withGroup 455 B
withIntersectionObserver 303 B
withMountOnMediaQuery 393 B
withMountWhenInView 347 B
withMountWhenPrefersMotion 431 B
withMutation 1010 B
withName 109 B
withRelativePointer 1.29 kB
withResponsiveOptions 2.4 kB
withScrolledInView 3.05 kB

@studiometa/js-toolkit-v4

Export Size (gzip) Diff
(barrel) 20.54 kB
BREAKPOINTS 776 B
Base 8.1 kB
DIAGNOSTICS 629 B
DRAG_MODES 162 B
EVENTS 155 B
MOUNT_ATTRIBUTE 69 B
SWAP_MODES 129 B
children 243 B
component 10.55 kB
createContext 472 B
createFallbackProvider 1.34 kB
createGroup 1.06 kB
createLocalStorage 2.34 kB
createLocalStorageProvider 1.23 kB
createMemoryStorageProvider 1.23 kB
createService 630 B
createServiceMixin 509 B
createSessionStorage 2.34 kB
createSessionStorageProvider 1.23 kB
createStorage 2.32 kB
createUrlSearchParamsInHashProvider 1.23 kB
createUrlSearchParamsInHashStorage 2.36 kB
createUrlSearchParamsProvider 1.23 kB
createUrlSearchParamsStorage 2.36 kB
defaultScheduler 1.5 kB
defineManifest 983 B
domUpdate 1.23 kB
emitExtendable 1.09 kB
fromMetaGlob 203 B
fromWebpackContext 131 B
getBreakpoints 776 B
getInstances 2.81 kB
inject 175 B
injectContext 675 B
injectContextSync 634 B
jsonSerializer 95 B
localStorageProvider 1.22 kB
memoryStorageProvider 1.23 kB
nextFrame 115 B
on 8.43 kB
perTarget 176 B
provide 178 B
provideContext 704 B
provideRootContext 748 B
read 127 B
registerComponent 10.47 kB
registerComponents 10.49 kB
registerManifest 10.56 kB
sessionStorageProvider 1.22 kB
setBreakpoints 805 B
signal 920 B
subscribeContext 1.45 kB
swap 2.63 kB
toggle 176 B
until 172 B
urlSearchParamsInHashProvider 1.22 kB
urlSearchParamsProvider 1.22 kB
useBreakpoint 1.44 kB
useDrag 3.22 kB
useInView 1.31 kB
useMediaQuery 1.05 kB
useMutation 1.29 kB
usePointer 1.72 kB
usePrefersReducedMotion 1.08 kB
useRaf 1.93 kB
useResize 1.3 kB
useScroll 2.54 kB
useScrollProgress 3.51 kB
useWindowScroll 2.52 kB
useWindowSize 1.3 kB
utils 8.65 kB
utils/DEFAULT_DAMP_FACTOR 109 B
utils/INERTIA_FRAME 97 B
utils/MAX_SPRING_RATIO 100 B
utils/SCROLL_AXES 100 B
utils/TRANSFORM_PROPS 137 B
utils/TRANSITION_OPTIONS 132 B
utils/camelCase 449 B
utils/capitalize 119 B
utils/clamp 133 B
utils/clamp01 149 B
utils/clampDampFactor 157 B
utils/createEaseInOut 120 B
utils/createEaseOut 91 B
utils/createElement 638 B
utils/createRange 205 B
utils/damp 211 B
utils/debounce 121 B
utils/decayOver 162 B
utils/deepmerge 312 B
utils/easeInCirc 94 B
utils/easeInCubic 81 B
utils/easeInExpo 97 B
utils/easeInOutCirc 150 B
utils/easeInOutCubic 141 B
utils/easeInOutExpo 150 B
utils/easeInOutQuad 139 B
utils/easeInOutQuart 140 B
utils/easeInOutQuint 140 B
utils/easeInOutSine 156 B
utils/easeInQuad 80 B
utils/easeInQuart 81 B
utils/easeInQuint 81 B
utils/easeInSine 104 B
utils/easeLinear 77 B
utils/easeOutCirc 121 B
utils/easeOutCubic 111 B
utils/easeOutExpo 124 B
utils/easeOutQuad 110 B
utils/easeOutQuart 112 B
utils/easeOutQuint 111 B
utils/easeOutSine 132 B
utils/enterTransition 679 B
utils/fold 200 B
utils/getOffsetSizes 268 B
utils/historyPush 380 B
utils/historyReplace 381 B
utils/inertiaDecay 199 B
utils/inertiaFinalValue 187 B
utils/inertiaStep 232 B
utils/inertiaTimeConstant 178 B
utils/isBoolean 90 B
utils/isDefined 87 B
utils/isFunction 86 B
utils/isNull 78 B
utils/isNumber 103 B
utils/isObject 115 B
utils/isString 89 B
utils/kebabCase 421 B
utils/leaveTransition 679 B
utils/lerp 120 B
utils/loadImage 245 B
utils/loadLink 776 B
utils/loadScript 697 B
utils/lowerCase 84 B
utils/map 128 B
utils/matrix 150 B
utils/mean 147 B
utils/memo 217 B
utils/noop 62 B
utils/noopValue 76 B
utils/objectToURLSearchParams 253 B
utils/pascalCase 434 B
utils/random 93 B
utils/randomInt 132 B
utils/randomItem 163 B
utils/round 130 B
utils/saveActiveElement 571 B
utils/scrollTo 1.72 kB
utils/selectorFor 2.72 kB
utils/setClassesOrStyles 218 B
utils/smoothTo 2.56 kB
utils/snakeCase 421 B
utils/spring 343 B
utils/throttle 151 B
utils/transform 286 B
utils/transition 577 B
utils/trapFocus 717 B
utils/untrapFocus 587 B
utils/upperCase 84 B
utils/wait 103 B
utils/withLeadingCharacters 142 B
utils/withLeadingSlash 152 B
utils/withTrailingCharacters 143 B
utils/withTrailingSlash 153 B
utils/withoutLeadingCharacters 127 B
utils/withoutLeadingCharactersRecursive 144 B
utils/withoutLeadingSlash 138 B
utils/withoutTrailingCharacters 129 B
utils/withoutTrailingCharactersRecursive 147 B
utils/withoutTrailingSlash 140 B
utils/wrap 154 B
viewTransition 1.66 kB
watchAttributes 1.98 kB
whenDOMSettled 2.31 kB
withDrag 3.61 kB
withInView 1.76 kB
withMutation 1.78 kB
withPointer 2.11 kB
withRaf 2.31 kB
withResize 1.7 kB
withScroll 2.93 kB
withScrollProgress 3.94 kB
write 125 B

@github-actions

Copy link
Copy Markdown

Code Review

Risk: Low — The change is safe to merge and adds coverage and documentation explaining why @component() copies inherited configuration.

The new specs verify that the copy does not alter the resolved configuration, preserves brand recognition for configs without a name, avoids mutating parent config objects, and documents static-field overwrite behavior. The decorator implementation remains functionally unchanged apart from the explanatory comment.

No issues found.


Review usage: 53,850 in (43,599 cached) / 1,403 out tokens — $0.0128 (openrouter/openai/gpt-5.6-luna, thinking: low)

Reviewed by @weareikko/code-review v0.9.5 for commit 4adae7a.

@codecov

codecov Bot commented Aug 16, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 97.16%. Comparing base (09c38f5) to head (4adae7a).

Additional details and impacted files
@@           Coverage Diff           @@
##             main     #832   +/-   ##
=======================================
  Coverage   97.16%   97.16%           
=======================================
  Files         170      170           
  Lines        4133     4133           
  Branches     1152     1151    -1     
=======================================
  Hits         4016     4016           
  Misses        106      106           
  Partials       11       11           
Flag Coverage Δ
eslint-plugin-js-toolkit 93.79% <ø> (ø)
js-toolkit 97.92% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@github-actions

Copy link
Copy Markdown

v3 mount benchmarks

Base and head measured on this runner, alternating over 3 rounds each; every value is the median of the round medians. Running both sides on one machine is what removes cross-machine noise — a cached baseline from another runner would put it back.

A move under 25%, or on a benchmark under 5 ms, is not reported as a change: it is inside the measured noise of a shared runner.

No benchmark moved beyond the noise floor.

Within noise (10)
Group Benchmark Base Head us / component Change
destroy 1000 flat components — v3 v3 — destroy 26.2 ms 26.0 ms 26.00 -0.8%
destroy 1000 flat components — v4 v4 — destroy 2.60 ms 3.00 ms 3.00 +15.4%
swap 1000 components — v3 v3 — control 0.20 ms 0.20 ms 0.20 0.0%
swap 1000 components — v3 v3 — flat 36.8 ms 35.8 ms 35.80 -2.7%
swap 1000 components — v3 v3 — nested 44.8 ms 45.0 ms 45.00 +0.4%
swap 1000 components — v3 v3 — realistic 118.1 ms 119.5 ms 119.50 +1.2%
swap 1000 components — v4 v4 — control 2.50 ms 2.00 ms 2.00 -20.0%
swap 1000 components — v4 v4 — flat 14.0 ms 14.2 ms 14.20 +1.4%
swap 1000 components — v4 v4 — nested 12.4 ms 12.9 ms 12.90 +4.0%
swap 1000 components — v4 v4 — realistic 73.0 ms 74.8 ms 74.80 +2.5%

@github-actions

Copy link
Copy Markdown

v4 mount benchmarks

Base and head measured on this runner, alternating over 3 rounds each; every value is the median of the round medians. Running both sides on one machine is what removes cross-machine noise — a cached baseline from another runner would put it back.

A move under 25%, or on a benchmark under 5 ms, is not reported as a change: it is inside the measured noise of a shared runner.

Group Benchmark Base Head us / component Change
destroy 5000 flat components, one removal flat 9.30 ms 13.4 ms 2.68 +44.1%
mount 1000 flat components, 1 vs 10 insertions 10 insertions 7.20 ms 9.40 ms 9.40 +30.6%
mount 1000 components, one insertion in-view — one controller per element 20.7 ms 26.1 ms 26.10 +26.1%
Within noise (15)
Group Benchmark Base Head us / component Change
destroy 1000 flat components, one removal flat 1.60 ms 1.90 ms 1.90 +18.7%
mount 1000 components, one insertion control — declared but unregistered 1.40 ms 1.50 ms 1.50 +7.1%
mount 1000 components, one insertion flat 11.9 ms 11.8 ms 11.80 -0.8%
mount 1000 components, one insertion nested 4 deep 9.30 ms 9.00 ms 9.00 -3.2%
mount 1000 components, one insertion realistic — 5 refs, 3 options, 4 handlers 56.7 ms 54.4 ms 54.40 -4.1%
mount 1000 components, one insertion responsive option — breakpoint cascade per mount 11.7 ms 11.0 ms 11.00 -6.0%
mount 1000 flat components, 1 vs 10 insertions 1 insertion 8.10 ms 8.50 ms 8.50 +4.9%
mount 5000 components, one insertion control — declared but unregistered 12.4 ms 12.6 ms 2.52 +1.6%
mount 5000 components, one insertion flat 46.5 ms 45.0 ms 9.00 -3.2%
mount 5000 components, one insertion in-view — one controller per element 110.6 ms 116.6 ms 23.32 +5.4%
mount 5000 components, one insertion nested 4 deep 47.2 ms 47.6 ms 9.52 +0.8%
mount 5000 components, one insertion realistic — 5 refs, 3 options, 4 handlers 268.9 ms 285.5 ms 57.10 +6.2%
mount 5000 components, one insertion responsive option — breakpoint cascade per mount 59.5 ms 61.3 ms 12.26 +3.0%
mount 5000 flat components, 1 vs 10 insertions 1 insertion 47.9 ms 47.6 ms 9.52 -0.6%
mount 5000 flat components, 1 vs 10 insertions 10 insertions 48.9 ms 50.1 ms 10.02 +2.5%

@titouanmathis
titouanmathis merged commit 688b2b5 into main Aug 16, 2026
12 checks passed
@titouanmathis
titouanmathis deleted the refactor/v4-component-decorator-config branch August 16, 2026 19:26
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant