[radio][checkbox][switch] Reduce bundle size#5223
Conversation
commit: |
Bundle size
PerformanceTotal duration: 1,361.35 ms +83.02 ms(+6.5%) | Renders: 78 (+0) | Paint: 2,132.01 ms +153.06 ms(+7.7%)
12 tests within noise — details Metric alarms
Check out the code infra dashboard for more information about this PR. |
✅ Deploy Preview for base-ui ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
There was a problem hiding this comment.
Pull request overview
This PR performs a bundle-size reduction pass across Switch, Radio, Checkbox, and shared internals by replacing runtime enum-member lookups for data-* attributes with inlined string literals, and adds “enum sync” tests to keep the literals and enums aligned without reintroducing runtime references.
Changes:
- Inline frequently-read
data-*attribute keys (e.g.data-checked,data-invalid, transition status hooks) so related enums can tree-shake out of consumer bundles. - Refactor Checkbox state-attribute mapping from a hook to a pure helper, and simplify a few context/default-value patterns.
- Add targeted tests to pin inlined literals to their corresponding enums and to cover a few subtle ARIA/form/StrictMode invariants.
Reviewed changes
Copilot reviewed 22 out of 22 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| packages/react/src/switch/stateAttributesMapping.ts | Inline data-checked / data-unchecked keys in the Switch state mapping. |
| packages/react/src/switch/root/SwitchRoot.tsx | Remove mergeProps usage for hidden input props and simplify effect deps; keep validation props applied. |
| packages/react/src/switch/root/SwitchRoot.test.tsx | Add a browser-only regression test to ensure validation/ARIA props survive canceled changes + submit/reset. |
| packages/react/src/switch/enumSync.test.ts | New test linking inlined Switch data-* literals back to SwitchRootDataAttributes. |
| packages/react/src/radio/utils/stateAttributesMapping.ts | Inline data-checked / data-unchecked in Radio state mapping. |
| packages/react/src/radio/root/RadioRoot.tsx | Simplify defaulting of group-context callbacks via destructuring defaults. |
| packages/react/src/radio/enumSync.test.ts | New test linking inlined Radio data-* literals back to RadioRootDataAttributes. |
| packages/react/src/radio-group/RadioGroup.tsx | Simplify aria-labelledby fallback computation and trim redundant context value fields. |
| packages/react/src/radio-group/RadioGroup.test.tsx | Add regression coverage for aria-labelledby precedence updates as labels/legends mount/unmount/replace. |
| packages/react/src/internals/useAnimationsFinished.ts | Inline transition “starting style” attribute key to avoid enum runtime reference. |
| packages/react/src/internals/stateAttributesMapping.ts | Inline transition hook attribute keys so TransitionStatusDataAttributes can tree-shake. |
| packages/react/src/internals/stateAttributesMapping.test.ts | New tests syncing inlined transition + validity mapping literals to their enums. |
| packages/react/src/internals/field-constants/constants.ts | Inline data-valid / data-invalid in shared field validity mapping. |
| packages/react/src/checkbox/utils/useStateAttributesMapping.ts | Remove hook-based mapping helper (no longer needed). |
| packages/react/src/checkbox/utils/getCheckboxStateAttributesMapping.ts | New pure helper returning Checkbox state-attribute mapping with inlined data-* keys. |
| packages/react/src/checkbox/root/CheckboxRoot.tsx | Switch to new mapping helper and apply minor cleanup (e.g. Symbol() init). |
| packages/react/src/checkbox/indicator/CheckboxIndicator.tsx | Reuse the new mapping helper and remove redundant validity mapping spread. |
| packages/react/src/checkbox/enumSync.test.ts | New test linking inlined Checkbox data-* literals back to CheckboxRootDataAttributes. |
| packages/react/src/checkbox-group/useCheckboxGroupParent.ts | Use shared EMPTY_ARRAY, simplify filter logic, and remove redundant returned indeterminate field. |
| packages/react/src/checkbox-group/CheckboxGroupContext.ts | Simplify useCheckboxGroupContext to a direct context read (internal helper). |
| packages/react/src/checkbox-group/CheckboxGroup.tsx | Simplify uncontrolled defaultValue computation and reuse EMPTY_ARRAY. |
| packages/react/src/checkbox-group/CheckboxGroup.test.tsx | Add StrictMode regression test ensuring omitted defaults don’t leak between groups. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
d53520c to
617bad3
Compare
Reduces the Radio, Checkbox, and Switch bundle size without changing behavior or the public API. The bundle bot is authoritative for the current size impact.
Runtime-read
data-*enum members are inlined so the enums tree-shake out, including the component root mappings and shared validity and transition mappings. Local cleanup and enum-sync tests pin every inlined string to its source enum.