Skip to content

Conversation

@naporin0624
Copy link
Member

@naporin0624 naporin0624 commented Jun 18, 2025

やったこと

  • React Aria の依存関係とバンドルサイズを削減するため、React Aria の一部のユーティリティを独自実装に置き換えました
  • TextField と TextArea コンポーネントで React Aria ユーティリティを自前実装に変更
  • useId、mergeRefs、useObjectRef、useVisuallyHidden の各ユーティリティを独自実装し、テストを追加
  • React 18+ を必要とするよう設定(useId フック使用のため)
  • 不要になった React Aria パッケージを削除

動作確認環境

チェックリスト

  • 破壊的変更がある場合には、対象のパッケージのメジャーバージョンが上がっていることを確認した
  • 追加したコンポーネントが index.ts から再 export されている
  • README やドキュメントに影響があることを確認した

@naporin0624 naporin0624 self-assigned this Jun 18, 2025
@naporin0624 naporin0624 marked this pull request as draft June 18, 2025 10:39
@github-actions
Copy link

github-actions bot commented Jun 18, 2025

Size Change: +1.81 kB (+0.31%)

Total Size: 584 kB

Filename Size Change
./packages/react/dist/index.cjs.js 62.9 kB +185 B (+0.29%)
./packages/react/dist/index.esm.js 56.6 kB +421 B (+0.75%)
./packages/react/dist/_lib/mergeRefs/index.d.ts 300 B +300 B (new file) 🆕
./packages/react/dist/_lib/useId/index.d.ts 242 B +242 B (new file) 🆕
./packages/react/dist/_lib/useObjectRef/index.d.ts 306 B +306 B (new file) 🆕
./packages/react/dist/_lib/useVisuallyHidden/index.d.ts 355 B +355 B (new file) 🆕
ℹ️ View Unchanged
Filename Size
./packages/foundation/dist/border-radius.d.ts 692 B
./packages/foundation/dist/breakpoint.d.ts 225 B
./packages/foundation/dist/color.d.ts 171 B
./packages/foundation/dist/effect.d.ts 1.08 kB
./packages/foundation/dist/grid.d.ts 396 B
./packages/foundation/dist/index.cjs.js 3.68 kB
./packages/foundation/dist/index.d.ts 230 B
./packages/foundation/dist/index.esm.js 2.3 kB
./packages/foundation/dist/spacing.d.ts 305 B
./packages/foundation/dist/typography.d.ts 790 B
./packages/icons-cli/dist/index.js 23.1 kB
./packages/icons/dist/charcoalIconFiles.d.ts 4.97 kB
./packages/icons/dist/index.cjs.js 11.3 kB
./packages/icons/dist/index.d.ts 513 B
./packages/icons/dist/index.esm.js 9.57 kB
./packages/icons/dist/loaders/CharcoalIconFilesLoader.d.ts 7.68 kB
./packages/icons/dist/loaders/CustomIconLoader.d.ts 417 B
./packages/icons/dist/loaders/CustomRawFileLoader.d.ts 687 B
./packages/icons/dist/loaders/index.d.ts 181 B
./packages/icons/dist/loaders/Loadable.d.ts 98 B
./packages/icons/dist/loaders/PixivIconLoadError.d.ts 153 B
./packages/icons/dist/PixivIcon.d.ts 1.89 kB
./packages/icons/dist/PixivIcon.test.d.ts 55 B
./packages/icons/dist/ssr.d.ts 75 B
./packages/pullrequest-cli/dist/index.js 7.46 kB
./packages/react-sandbox/dist/_lib/compat.d.ts 427 B
./packages/react-sandbox/dist/_lib/ComponentAbstraction.d.ts 967 B
./packages/react-sandbox/dist/components/Carousel/index.d.ts 1.38 kB
./packages/react-sandbox/dist/components/CarouselButton/index.d.ts 675 B
./packages/react-sandbox/dist/components/Filter/index.d.ts 1.05 kB
./packages/react-sandbox/dist/components/HintText/index.d.ts 386 B
./packages/react-sandbox/dist/components/icons/Base.d.ts 762 B
./packages/react-sandbox/dist/components/icons/DotsIcon.d.ts 226 B
./packages/react-sandbox/dist/components/icons/InfoIcon.d.ts 115 B
./packages/react-sandbox/dist/components/icons/NextIcon.d.ts 309 B
./packages/react-sandbox/dist/components/icons/WedgeIcon.d.ts 345 B
./packages/react-sandbox/dist/components/Layout/index.d.ts 2.18 kB
./packages/react-sandbox/dist/components/LeftMenu/index.d.ts 438 B
./packages/react-sandbox/dist/components/MenuListItem/index.d.ts 1.91 kB
./packages/react-sandbox/dist/components/Pager/index.d.ts 557 B
./packages/react-sandbox/dist/components/SwitchCheckbox/index.d.ts 340 B
./packages/react-sandbox/dist/components/TextEllipsis/helper.d.ts 230 B
./packages/react-sandbox/dist/components/TextEllipsis/index.d.ts 381 B
./packages/react-sandbox/dist/components/WithIcon/index.d.ts 1.07 kB
./packages/react-sandbox/dist/foundation/constants.d.ts 208 B
./packages/react-sandbox/dist/foundation/hooks.d.ts 1.04 kB
./packages/react-sandbox/dist/foundation/support.d.ts 131 B
./packages/react-sandbox/dist/foundation/utils.d.ts 613 B
./packages/react-sandbox/dist/hooks/index.d.ts 148 B
./packages/react-sandbox/dist/index.cjs.js 64.2 kB
./packages/react-sandbox/dist/index.d.ts 1.38 kB
./packages/react-sandbox/dist/index.esm.js 54.2 kB
./packages/react-sandbox/dist/misc/storybook-helper.d.ts 343 B
./packages/react-sandbox/dist/styled.d.ts 12.3 kB
./packages/react/dist/_lib/compat.d.ts 1.19 kB
./packages/react/dist/_lib/createDivComponent.d.ts 455 B
./packages/react/dist/_lib/index.d.ts 1.02 kB
./packages/react/dist/_lib/useClassNames.d.ts 192 B
./packages/react/dist/_lib/useForwardedRef.d.ts 169 B
./packages/react/dist/components/Button/index.d.ts 1.15 kB
./packages/react/dist/components/Button/styledButtonTypeTest.d.d.ts 63 B
./packages/react/dist/components/Checkbox/CheckboxInput/index.d.ts 628 B
./packages/react/dist/components/Checkbox/CheckboxWithLabel.d.ts 307 B
./packages/react/dist/components/Checkbox/index.d.ts 668 B
./packages/react/dist/components/Clickable/index.d.ts 715 B
./packages/react/dist/components/DropdownSelector/Divider/index.d.ts 133 B
./packages/react/dist/components/DropdownSelector/DropdownMenuItem/index.d.ts 341 B
./packages/react/dist/components/DropdownSelector/DropdownPopover.d.ts 514 B
./packages/react/dist/components/DropdownSelector/index.d.ts 731 B
./packages/react/dist/components/DropdownSelector/ListItem/index.d.ts 529 B
./packages/react/dist/components/DropdownSelector/MenuItem/index.d.ts 639 B
./packages/react/dist/components/DropdownSelector/MenuItem/internals/handleFocusByKeyBoard.d.ts 373 B
./packages/react/dist/components/DropdownSelector/MenuItem/internals/useMenuItemHandleKeyDown.d.ts 480 B
./packages/react/dist/components/DropdownSelector/MenuItemGroup/index.d.ts 442 B
./packages/react/dist/components/DropdownSelector/MenuList/index.d.ts 568 B
./packages/react/dist/components/DropdownSelector/MenuList/internals/getValuesRecursive.d.ts 412 B
./packages/react/dist/components/DropdownSelector/MenuList/MenuListContext.d.ts 412 B
./packages/react/dist/components/DropdownSelector/Popover/index.d.ts 672 B
./packages/react/dist/components/DropdownSelector/Popover/usePreventScroll.d.ts 159 B
./packages/react/dist/components/DropdownSelector/utils/findPreviewRecursive.d.ts 411 B
./packages/react/dist/components/FieldLabel/index.d.ts 492 B
./packages/react/dist/components/HintText/index.d.ts 382 B
./packages/react/dist/components/Icon/index.d.ts 498 B
./packages/react/dist/components/IconButton/index.d.ts 673 B
./packages/react/dist/components/LoadingSpinner/index.d.ts 678 B
./packages/react/dist/components/Modal/Dialog/index.d.ts 373 B
./packages/react/dist/components/Modal/index.d.ts 2.23 kB
./packages/react/dist/components/Modal/ModalBackgroundContext.d.ts 231 B
./packages/react/dist/components/Modal/ModalPlumbing.d.ts 1.27 kB
./packages/react/dist/components/Modal/useCustomModalOverlay.d.ts 797 B
./packages/react/dist/components/MultiSelect/context.d.ts 394 B
./packages/react/dist/components/MultiSelect/index.d.ts 1.29 kB
./packages/react/dist/components/Radio/index.d.ts 494 B
./packages/react/dist/components/Radio/RadioGroup/index.d.ts 733 B
./packages/react/dist/components/Radio/RadioGroupContext.d.ts 339 B
./packages/react/dist/components/Radio/RadioInput/index.d.ts 584 B
./packages/react/dist/components/SegmentedControl/index.d.ts 758 B
./packages/react/dist/components/SegmentedControl/RadioGroupContext.d.ts 362 B
./packages/react/dist/components/Switch/index.d.ts 452 B
./packages/react/dist/components/Switch/SwitchInput/index.d.ts 482 B
./packages/react/dist/components/Switch/SwitchWithLabel.d.ts 308 B
./packages/react/dist/components/TagItem/index.d.ts 773 B
./packages/react/dist/components/TextArea/index.d.ts 1.25 kB
./packages/react/dist/components/TextField/AssistiveText/index.d.ts 433 B
./packages/react/dist/components/TextField/index.d.ts 1.38 kB
./packages/react/dist/components/TextField/useFocusWithClick.d.ts 256 B
./packages/react/dist/core/CharcoalProvider.d.ts 270 B
./packages/react/dist/core/OverlayProvider.d.ts 101 B
./packages/react/dist/core/SetThemeScript.d.ts 890 B
./packages/react/dist/core/SSRProvider.d.ts 323 B
./packages/react/dist/core/themeHelper.d.ts 2.05 kB
./packages/react/dist/index.d.ts 2.37 kB
./packages/styled/dist/addThemeUtils.story.d.ts 330 B
./packages/styled/dist/builders/border.d.ts 685 B
./packages/styled/dist/builders/borderRadius.d.ts 440 B
./packages/styled/dist/builders/colors.d.ts 1.3 kB
./packages/styled/dist/builders/elementEffect.d.ts 533 B
./packages/styled/dist/builders/o.d.ts 5.91 kB
./packages/styled/dist/builders/outline.d.ts 638 B
./packages/styled/dist/builders/size.d.ts 1.19 kB
./packages/styled/dist/builders/spacing.d.ts 1.17 kB
./packages/styled/dist/builders/transition.d.ts 287 B
./packages/styled/dist/builders/typography.d.ts 624 B
./packages/styled/dist/defineThemeVariables.test.d.ts 66 B
./packages/styled/dist/factories/lib.d.ts 3.96 kB
./packages/styled/dist/index.cjs.js 27.8 kB
./packages/styled/dist/index.d.ts 6.9 kB
./packages/styled/dist/index.esm.js 24.4 kB
./packages/styled/dist/index.test.d.ts 204 B
./packages/styled/dist/internals/index.d.ts 1.6 kB
./packages/styled/dist/storyHelper.d.ts 386 B
./packages/styled/dist/styles/assertiveRingCss.d.ts 141 B
./packages/styled/dist/styles/disabledCss.d.ts 131 B
./packages/styled/dist/styles/focusVisibleFocusRingCss.d.ts 318 B
./packages/styled/dist/TokenInjector.d.ts 533 B
./packages/styled/dist/util.d.ts 4.24 kB
./packages/styled/dist/utils/addThemeUtils.d.ts 383 B
./packages/styled/dist/utils/CharcoalStyledTheme.d.ts 1.43 kB
./packages/styled/dist/utils/gap.d.ts 473 B
./packages/styled/dist/utils/helpers/pxIfNum.d.ts 99 B
./packages/styled/dist/utils/helpers/SpacingType.d.ts 137 B
./packages/styled/dist/utils/margin.d.ts 905 B
./packages/styled/dist/utils/padding.d.ts 935 B
./packages/styled/dist/utils/typographyCss.d.ts 306 B
./packages/tailwind-config/dist/_lib/compat.d.ts 423 B
./packages/tailwind-config/dist/_lib/TailwindBuild.d.ts 723 B
./packages/tailwind-config/dist/colors/plugin.d.ts 427 B
./packages/tailwind-config/dist/colors/plugin.test.d.ts 52 B
./packages/tailwind-config/dist/colors/pluginTokenV1.d.ts 1.48 kB
./packages/tailwind-config/dist/colors/toTailwindConfig.d.ts 380 B
./packages/tailwind-config/dist/colors/toTailwindConfig.test.d.ts 62 B
./packages/tailwind-config/dist/colors/utils.d.ts 347 B
./packages/tailwind-config/dist/docs/borderRadius/BorderRadius.d.ts 119 B
./packages/tailwind-config/dist/docs/borderRadius/index.d.ts 231 B
./packages/tailwind-config/dist/docs/colors/Colors.d.ts 107 B
./packages/tailwind-config/dist/docs/colors/index.d.ts 147 B
./packages/tailwind-config/dist/docs/colors/TextBgColor.d.ts 175 B
./packages/tailwind-config/dist/docs/colors/TextBgColor.story.d.ts 298 B
./packages/tailwind-config/dist/docs/colors/TextColors.d.ts 115 B
./packages/tailwind-config/dist/docs/gradient/Gradients.d.ts 113 B
./packages/tailwind-config/dist/docs/gradient/index.d.ts 433 B
./packages/tailwind-config/dist/docs/gradient/utils.d.ts 120 B
./packages/tailwind-config/dist/docs/index.d.ts 360 B
./packages/tailwind-config/dist/docs/screens/index.d.ts 107 B
./packages/tailwind-config/dist/docs/screens/Screens.d.ts 109 B
./packages/tailwind-config/dist/docs/spacing/index.d.ts 107 B
./packages/tailwind-config/dist/docs/spacing/Spacing.d.ts 109 B
./packages/tailwind-config/dist/docs/typography/HalfLeading.d.ts 117 B
./packages/tailwind-config/dist/docs/typography/index.d.ts 346 B
./packages/tailwind-config/dist/docs/typography/Sizes.d.ts 105 B
./packages/tailwind-config/dist/foundation.d.ts 360 B
./packages/tailwind-config/dist/gradient/plugin.d.ts 916 B
./packages/tailwind-config/dist/gradient/plugin.test.d.ts 52 B
./packages/tailwind-config/dist/index.cjs.js 17.2 kB
./packages/tailwind-config/dist/index.d.ts 593 B
./packages/tailwind-config/dist/index.esm.js 14.8 kB
./packages/tailwind-config/dist/index.test.d.ts 51 B
./packages/tailwind-config/dist/tokenV2.d.ts 161 B
./packages/tailwind-config/dist/tokenV2.test.d.ts 53 B
./packages/tailwind-config/dist/types.d.ts 855 B
./packages/tailwind-config/dist/typography/plugin.d.ts 246 B
./packages/tailwind-config/dist/util.d.ts 833 B
./packages/tailwind-diff/dist/commands/check.d.ts 296 B
./packages/tailwind-diff/dist/commands/check.js 4.37 kB
./packages/tailwind-diff/dist/commands/dump.d.ts 185 B
./packages/tailwind-diff/dist/commands/dump.js 1.26 kB
./packages/tailwind-diff/dist/defer.d.ts 164 B
./packages/tailwind-diff/dist/defer.js 792 B
./packages/tailwind-diff/dist/index.d.ts 46 B
./packages/tailwind-diff/dist/index.js 1.84 kB
./packages/tailwind-diff/dist/packageManager.d.ts 323 B
./packages/tailwind-diff/dist/packageManager.js 1.85 kB
./packages/tailwind-diff/dist/style.d.ts 436 B
./packages/tailwind-diff/dist/style.js 2.68 kB
./packages/tailwind-diff/dist/withPackages.d.ts 464 B
./packages/tailwind-diff/dist/withPackages.js 3.37 kB
./packages/theme/dist/abstract-theme.d.ts 1.19 kB
./packages/theme/dist/default.d.ts 163 B
./packages/theme/dist/index.cjs.js 5.92 kB
./packages/theme/dist/index.d.ts 121 B
./packages/theme/dist/index.esm.js 3.63 kB
./packages/theme/dist/theme.d.ts 2.87 kB
./packages/theme/dist/unstable-css/_variables_dark.css.d.ts 26 B
./packages/theme/dist/unstable-css/_variables_light.css.d.ts 26 B
./packages/theme/dist/unstable-token-object/helpers/changecase-keys.d.ts 554 B
./packages/theme/dist/unstable-token-object/helpers/changecase-keys.test-d.d.ts 63 B
./packages/theme/dist/unstable-token-object/helpers/changecase-keys.test.d.ts 61 B
./packages/theme/dist/unstable-token-object/helpers/is-empty-array.d.ts 119 B
./packages/theme/dist/unstable-token-object/helpers/nest-object.d.ts 397 B
./packages/theme/dist/unstable-token-object/helpers/nest-object.test.d.ts 57 B
./packages/theme/dist/unstable-token-object/index.cjs.js 5.29 kB
./packages/theme/dist/unstable-token-object/index.d.ts 2.15 kB
./packages/theme/dist/unstable-token-object/index.esm.js 3.38 kB
./packages/theme/dist/unstable-token-object/reference-token.d.ts 299 B
./packages/theme/dist/unstable-token-object/reference-token.test.d.ts 61 B
./packages/theme/dist/unstable-token-object/to-token-object.d.ts 828 B
./packages/theme/dist/unstable-token-object/token-object.bench.d.ts 59 B
./packages/theme/dist/unstable-token-object/token-object.test.d.ts 58 B
./packages/theme/dist/unstable-token-object/types.d.ts 614 B
./packages/token-cli/dist/index.js 7.19 kB
./packages/utils/dist/index.cjs.js 7.1 kB
./packages/utils/dist/index.d.ts 3.17 kB
./packages/utils/dist/index.esm.js 4.67 kB

compressed-size-action

@github-actions
Copy link

github-actions bot commented Jun 18, 2025

Visit the preview URL for this PR (updated for commit fb9a198):

https://pixiv-charcoal-web--pr750-feat-reduce-react-ar-magqiwxj.web.app

(expires Wed, 16 Jul 2025 10:35:32 GMT)

🔥 via Firebase Hosting GitHub Action 🌎

Sign: 314b26d3adca98a761c7e4d9922ebb206ff024a0

@naporin0624 naporin0624 force-pushed the feat/reduce-react-aria-bundle-size branch from 3fb829d to f634bf5 Compare June 18, 2025 11:20
@naporin0624 naporin0624 temporarily deployed to preview-channel July 2, 2025 11:59 — with GitHub Actions Inactive
@naporin0624 naporin0624 temporarily deployed to preview-channel July 9, 2025 09:21 — with GitHub Actions Inactive
Update mock path from src/utils/useId to src/_lib/useId to match the new
directory structure after utilities were reorganized to _lib directory.
Update test snapshots to reflect the new charcoal-visually-hidden class name
after the useVisuallyHidden utility was updated to use the new class name.
@naporin0624 naporin0624 temporarily deployed to preview-channel July 9, 2025 09:55 — with GitHub Actions Inactive
- Use individual type imports instead of React namespace import in mergeRefs
- Replace forEach with for/of loop in mergeRefs for better performance
- Fix early return bug in mergeRefs (use continue instead of return)
- Rename generatedId to _id in useId for consistency
- Use type imports for MutableRefObject and Ref in useObjectRef
- Simplify useObjectRef by using mergeRefs utility
- Update vitest mock to target _lib/useId instead of React namespace
@naporin0624 naporin0624 temporarily deployed to preview-channel July 9, 2025 10:21 — with GitHub Actions Inactive
@naporin0624 naporin0624 marked this pull request as ready for review July 9, 2025 10:26
@naporin0624 naporin0624 requested review from mimokmt and yue4u July 9, 2025 10:26
@naporin0624 naporin0624 marked this pull request as draft July 9, 2025 10:29
Remove @react-aria/utils and @react-aria/visually-hidden dependencies
and use local implementations from _lib directory to reduce bundle size
@yue4u
Copy link
Contributor

yue4u commented Aug 6, 2025

差分的に良さそうです!
CI上報告されているbundle size自体減っていなさそう(内部で実は使われていたり?)に見えて気になりました
#750 (comment)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

image snapshots update Pull requests that update image snapshots minor

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants