Skip to content

Commit 619ec70

Browse files
ggazzoggazzo
committed
perf: slim react-aria and react-stately barrel imports (-489 KB)
- Add yarn patches for react-aria and react-stately that slim their barrel entry points to only re-export the sub-packages actually used - Replace barrel imports with direct sub-package imports across apps/meteor and workspace packages (gazzodown, ui-client, ui-contexts, ui-voip)
1 parent 18a26c8 commit 619ec70

33 files changed

Lines changed: 721 additions & 75 deletions

File tree

‎.yarn/patches/react-aria-npm-3.37.0-83959bd2fa.patch‎

Lines changed: 316 additions & 0 deletions
Large diffs are not rendered by default.

‎.yarn/patches/react-stately-npm-3.17.0-264cc7a43c.patch‎

Lines changed: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
diff --git a/dist/main.js b/dist/main.js
2+
index 8e3aafa76ccbbc4491666e9593220378c3e79c18..2ed9b74c20b63fb1f9e8552d61343b26540f78d9 100644
3+
--- a/dist/main.js
4+
+++ b/dist/main.js
5+
@@ -1,98 +1,8 @@
6+
"use strict";
7+
-
8+
exports.__esModule = true;
9+
-exports.useTreeState = exports.useTooltipTriggerState = exports.useToggleState = exports.useTabListState = exports.Cell = exports.Row = exports.Column = exports.TableBody = exports.TableHeader = exports.useTableState = exports.useMultipleSelectionState = exports.useSliderState = exports.useSelectState = exports.useSearchFieldState = exports.useRadioGroupState = exports.useOverlayTriggerState = exports.useNumberFieldState = exports.useMenuTriggerState = exports.useSingleSelectListState = exports.useListState = exports.useTreeData = exports.useListData = exports.useAsyncList = exports.useCollection = exports.Section = exports.Item = exports.useTimeFieldState = exports.useDateRangePickerState = exports.useDatePickerState = exports.useDateFieldState = exports.useComboBoxState = exports.useCheckboxGroupState = exports.useRangeCalendarState = exports.useCalendarState = void 0;
10+
-
11+
-var _calendar = require("@react-stately/calendar");
12+
-
13+
-exports.useCalendarState = _calendar.useCalendarState;
14+
-exports.useRangeCalendarState = _calendar.useRangeCalendarState;
15+
-
16+
-var _checkbox = require("@react-stately/checkbox");
17+
-
18+
-exports.useCheckboxGroupState = _checkbox.useCheckboxGroupState;
19+
-
20+
-var _combobox = require("@react-stately/combobox");
21+
-
22+
-exports.useComboBoxState = _combobox.useComboBoxState;
23+
-
24+
-var _datepicker = require("@react-stately/datepicker");
25+
-
26+
-exports.useDateFieldState = _datepicker.useDateFieldState;
27+
-exports.useDatePickerState = _datepicker.useDatePickerState;
28+
-exports.useDateRangePickerState = _datepicker.useDateRangePickerState;
29+
-exports.useTimeFieldState = _datepicker.useTimeFieldState;
30+
-
31+
-var _collections = require("@react-stately/collections");
32+
-
33+
-exports.Item = _collections.Item;
34+
-exports.Section = _collections.Section;
35+
-exports.useCollection = _collections.useCollection;
36+
-
37+
-var _data = require("@react-stately/data");
38+
-
39+
-exports.useAsyncList = _data.useAsyncList;
40+
-exports.useListData = _data.useListData;
41+
-exports.useTreeData = _data.useTreeData;
42+
-
43+
-var _list = require("@react-stately/list");
44+
-
45+
-exports.useListState = _list.useListState;
46+
-exports.useSingleSelectListState = _list.useSingleSelectListState;
47+
-
48+
-var _menu = require("@react-stately/menu");
49+
-
50+
-exports.useMenuTriggerState = _menu.useMenuTriggerState;
51+
-
52+
-var _numberfield = require("@react-stately/numberfield");
53+
-
54+
-exports.useNumberFieldState = _numberfield.useNumberFieldState;
55+
-
56+
-var _overlays = require("@react-stately/overlays");
57+
-
58+
-exports.useOverlayTriggerState = _overlays.useOverlayTriggerState;
59+
-
60+
-var _radio = require("@react-stately/radio");
61+
-
62+
-exports.useRadioGroupState = _radio.useRadioGroupState;
63+
-
64+
-var _searchfield = require("@react-stately/searchfield");
65+
-
66+
-exports.useSearchFieldState = _searchfield.useSearchFieldState;
67+
-
68+
-var _select = require("@react-stately/select");
69+
-
70+
-exports.useSelectState = _select.useSelectState;
71+
-
72+
-var _slider = require("@react-stately/slider");
73+
-
74+
-exports.useSliderState = _slider.useSliderState;
75+
-
76+
-var _selection = require("@react-stately/selection");
77+
-
78+
-exports.useMultipleSelectionState = _selection.useMultipleSelectionState;
79+
-
80+
-var _table = require("@react-stately/table");
81+
-
82+
-exports.useTableState = _table.useTableState;
83+
-exports.TableHeader = _table.TableHeader;
84+
-exports.TableBody = _table.TableBody;
85+
-exports.Column = _table.Column;
86+
-exports.Row = _table.Row;
87+
-exports.Cell = _table.Cell;
88+
-
89+
-var _tabs = require("@react-stately/tabs");
90+
-
91+
-exports.useTabListState = _tabs.useTabListState;
92+
-
93+
-var _toggle = require("@react-stately/toggle");
94+
-
95+
-exports.useToggleState = _toggle.useToggleState;
96+
-
97+
-var _tooltip = require("@react-stately/tooltip");
98+
-
99+
-exports.useTooltipTriggerState = _tooltip.useTooltipTriggerState;
100+
-
101+
-var _tree = require("@react-stately/tree");
102+
-
103+
-exports.useTreeState = _tree.useTreeState;
104+
+var _collections = require("@react-stately/collections"); exports.Item = _collections.Item; exports.Section = _collections.Section;
105+
+var _menu = require("@react-stately/menu"); exports.useMenuTriggerState = _menu.useMenuTriggerState;
106+
+var _overlays = require("@react-stately/overlays"); exports.useOverlayTriggerState = _overlays.useOverlayTriggerState;
107+
+var _select = require("@react-stately/select"); exports.useSelectState = _select.useSelectState;
108+
+var _slider = require("@react-stately/slider"); exports.useSliderState = _slider.useSliderState;
109+
+var _tree = require("@react-stately/tree"); exports.useTreeState = _tree.useTreeState;
110+
diff --git a/dist/module.js b/dist/module.js
111+
index 37bdb24af4a8310cc702b2d9c1effe6aac261424..c098533fc2bbeb6b203d4350c2dcdd6e6663afd3 100644
112+
--- a/dist/module.js
113+
+++ b/dist/module.js
114+
@@ -1,33 +1,7 @@
115+
-/*
116+
- * Copyright 2020 Adobe. All rights reserved.
117+
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
118+
- * you may not use this file except in compliance with the License. You may obtain a copy
119+
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
120+
- *
121+
- * Unless required by applicable law or agreed to in writing, software distributed under
122+
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
123+
- * OF ANY KIND, either express or implied. See the License for the specific language
124+
- * governing permissions and limitations under the License.
125+
- */
126+
-
127+
-
128+
-export {useCalendarState, useRangeCalendarState} from '@react-stately/calendar';
129+
-export {useCheckboxGroupState} from '@react-stately/checkbox';
130+
-export {useComboBoxState} from '@react-stately/combobox';
131+
-export {useDateFieldState, useDatePickerState, useDateRangePickerState, useTimeFieldState} from '@react-stately/datepicker';
132+
-export {Item, Section, useCollection} from '@react-stately/collections';
133+
-export {useAsyncList, useListData, useTreeData} from '@react-stately/data';
134+
-export {useListState, useSingleSelectListState} from '@react-stately/list';
135+
+// Slim barrel: only exports actually used
136+
+export {Item, Section} from '@react-stately/collections';
137+
export {useMenuTriggerState} from '@react-stately/menu';
138+
-export {useNumberFieldState} from '@react-stately/numberfield';
139+
export {useOverlayTriggerState} from '@react-stately/overlays';
140+
-export {useRadioGroupState} from '@react-stately/radio';
141+
-export {useSearchFieldState} from '@react-stately/searchfield';
142+
export {useSelectState} from '@react-stately/select';
143+
export {useSliderState} from '@react-stately/slider';
144+
-export {useMultipleSelectionState} from '@react-stately/selection';
145+
-export {useTableState, TableHeader, TableBody, Column, Row, Cell} from '@react-stately/table';
146+
-export {useTabListState} from '@react-stately/tabs';
147+
-export {useToggleState} from '@react-stately/toggle';
148+
-export {useTooltipTriggerState} from '@react-stately/tooltip';
149+
export {useTreeState} from '@react-stately/tree';

‎apps/meteor/client/components/ImageGallery/ImageGallery.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1+
import { FocusScope } from '@react-aria/focus';
12
import type { IUpload } from '@rocket.chat/core-typings';
23
import { css } from '@rocket.chat/css-in-js';
34
import { Box, ButtonGroup, IconButton, Palette, PaletteStyleTag, Throbber, spacing } from '@rocket.chat/fuselage';
45
import { useRef, useState } from 'react';
5-
import { FocusScope } from 'react-aria';
66
import { createPortal } from 'react-dom';
77
import { useTranslation } from 'react-i18next';
88
import { Navigation, Zoom, Keyboard, A11y } from 'swiper/modules/index.mjs';

‎apps/meteor/client/components/ResultsLiveRegion.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { VisuallyHidden } from 'react-aria';
1+
import { VisuallyHidden } from '@react-aria/visually-hidden';
22
import { useTranslation } from 'react-i18next';
33

44
const ResultsLiveRegion = ({ shouldAnnounce, itemCount }: { shouldAnnounce: boolean; itemCount: number }) => {

‎apps/meteor/client/components/UserCard/UserCardDialog.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1+
import type { AriaDialogProps } from '@react-aria/dialog';
2+
import { useDialog } from '@react-aria/dialog';
13
import { Box } from '@rocket.chat/fuselage';
24
import type { ComponentProps } from 'react';
35
import { useRef } from 'react';
4-
import type { AriaDialogProps } from 'react-aria';
5-
import { useDialog } from 'react-aria';
66

77
type UserCardDialogProps = AriaDialogProps & ComponentProps<typeof Box>;
88

‎apps/meteor/client/navbar/NavBarNavigation.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1+
import { FocusScope } from '@react-aria/focus';
12
import { NavBarGroup, NavBarItem, Box } from '@rocket.chat/fuselage';
23
import { useLayout, useRouter } from '@rocket.chat/ui-contexts';
3-
import { FocusScope } from 'react-aria';
44
import { useTranslation } from 'react-i18next';
55

66
import NavBarSearch from './NavBarSearch';

‎apps/meteor/client/navbar/NavBarSearch/NavBarSearch.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
1+
import { useFocusManager } from '@react-aria/focus';
2+
import { useOverlayTrigger } from '@react-aria/overlays';
3+
import { useOverlayTriggerState } from '@react-stately/overlays';
14
import { Box, Icon, IconButton, TextInput } from '@rocket.chat/fuselage';
25
import { useEffectEvent, useMergedRefs } from '@rocket.chat/fuselage-hooks';
36
import { useCallback, useEffect, useRef } from 'react';
4-
import { useFocusManager, useOverlayTrigger } from 'react-aria';
57
import { FormProvider, useForm } from 'react-hook-form';
68
import { useTranslation } from 'react-i18next';
7-
import { useOverlayTriggerState } from 'react-stately';
89
import tinykeys from 'tinykeys';
910

1011
import NavBarSearchListBox from './NavBarSearchListbox';

‎apps/meteor/client/navbar/NavBarSearch/NavBarSearchListbox.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1+
import type { OverlayTriggerAria } from '@react-aria/overlays';
2+
import type { OverlayTriggerState } from '@react-stately/overlays';
13
import { Box, Tile } from '@rocket.chat/fuselage';
24
import { useDebouncedValue, useEffectEvent, useOutsideClick } from '@rocket.chat/fuselage-hooks';
35
import { CustomScrollbars } from '@rocket.chat/ui-client';
46
import { useRef } from 'react';
5-
import type { OverlayTriggerAria } from 'react-aria';
67
import { useFormContext } from 'react-hook-form';
78
import { useTranslation } from 'react-i18next';
8-
import type { OverlayTriggerState } from 'react-stately';
99

1010
import NavBarSearchNoResults from './NavBarSearchNoResults';
1111
import NavBarSearchRow from './NavBarSearchRow';

‎apps/meteor/client/navbar/NavBarSearch/hooks/useSearchClick.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1+
import type { OverlayTriggerState } from '@react-stately/overlays';
12
import { useCallback } from 'react';
2-
import type { OverlayTriggerState } from 'react-stately';
33

44
export const useSearchClick = (state: OverlayTriggerState) => {
55
const handleClick = useCallback(() => {

‎apps/meteor/client/navbar/NavBarSearch/hooks/useSearchFocus.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1+
import type { OverlayTriggerState } from '@react-stately/overlays';
12
import { useLayout } from '@rocket.chat/ui-contexts';
23
import { useCallback, useEffect } from 'react';
3-
import type { OverlayTriggerState } from 'react-stately';
44

55
export const useSearchFocus = (state: OverlayTriggerState) => {
66
const { navbar } = useLayout();

0 commit comments

Comments
 (0)