diff --git a/eslint.config.mjs b/eslint.config.mjs index 05237965bb..a47d3606fd 100644 --- a/eslint.config.mjs +++ b/eslint.config.mjs @@ -205,6 +205,13 @@ export default defineConfig( // this is a dep for @atproto/api, but we absolutely need them in sync, so just // rely on the transient version '@atproto/common-web', + // expo is not good enough at tree-shaking to use `radix-ui` directly + '@radix-ui/react-dismissable-layer', + '@radix-ui/react-focus-guards', + '@radix-ui/react-focus-scope', + '@radix-ui/react-dropdown-menu', + '@radix-ui/react-select', + '@radix-ui/react-popover', ], }, ], diff --git a/metro.config.js b/metro.config.js index ea270bd8cb..9ceef15b6e 100644 --- a/metro.config.js +++ b/metro.config.js @@ -14,10 +14,11 @@ if (cfg.resolver.resolveRequest) { // Enforce "no RNGH on web" cfg.resolver.blockList = [/react-native-gesture-handler\/.*/] -// Stub out unused Sentry integrations. They're statically imported by -// @sentry/browser's barrel, so we can't drop them via blockList; we redirect -// the imports to an empty module instead. ~185KB of dead weight on web. +// Stub out unused packages on web. They're statically imported by libraries we +// do use, so we can't drop them via blockList; we redirect the imports to an +// empty module instead. const STUBBED_PACKAGES = new Set([ + // Sentry integrations we don't use on web (~185KB). '@sentry-internal/replay', '@sentry-internal/replay-canvas', '@sentry-internal/feedback', diff --git a/src/components/EmojiPicker/index.web.tsx b/src/components/EmojiPicker/index.web.tsx index 8d5e7788ec..71cf769b9b 100644 --- a/src/components/EmojiPicker/index.web.tsx +++ b/src/components/EmojiPicker/index.web.tsx @@ -1,6 +1,6 @@ import {createContext, useContext, useEffect, useMemo, useRef} from 'react' import EmojiPicker from '@emoji-mart/react' -import {DropdownMenu} from 'radix-ui' +import * as DropdownMenu from '@radix-ui/react-dropdown-menu' import {useA11y} from '#/state/a11y' import {textInputWebEmitter} from '#/view/com/composer/text-input/textInputWebEmitter' diff --git a/src/components/Menu/index.web.tsx b/src/components/Menu/index.web.tsx index d89c5a2e71..dd357c1228 100644 --- a/src/components/Menu/index.web.tsx +++ b/src/components/Menu/index.web.tsx @@ -8,7 +8,7 @@ import { } from 'react-native' import {msg} from '@lingui/core/macro' import {useLingui} from '@lingui/react' -import {DropdownMenu} from 'radix-ui' +import * as DropdownMenu from '@radix-ui/react-dropdown-menu' import {useA11y} from '#/state/a11y' import {atoms as a, flatten, useTheme, web} from '#/alf' diff --git a/src/components/Select/index.web.tsx b/src/components/Select/index.web.tsx index 1aa4b39ea1..7463c85d02 100644 --- a/src/components/Select/index.web.tsx +++ b/src/components/Select/index.web.tsx @@ -1,6 +1,6 @@ import {createContext, forwardRef, Fragment, useContext, useMemo} from 'react' import {View} from 'react-native' -import {Select as RadixSelect} from 'radix-ui' +import * as RadixSelect from '@radix-ui/react-select' import {useA11y} from '#/state/a11y' import {atoms as a, flatten, useTheme, web} from '#/alf' diff --git a/src/components/Tooltip/index.web.tsx b/src/components/Tooltip/index.web.tsx index 9d36975aaa..f3f665f580 100644 --- a/src/components/Tooltip/index.web.tsx +++ b/src/components/Tooltip/index.web.tsx @@ -1,7 +1,7 @@ import {Children, createContext, useContext, useMemo} from 'react' import {View} from 'react-native' import {utils} from '@bsky.app/alf' -import {Popover} from 'radix-ui' +import * as Popover from '@radix-ui/react-popover' import {atoms as a, flatten, select, useTheme} from '#/alf' import { diff --git a/src/components/dms/EmojiReactionPicker.web.tsx b/src/components/dms/EmojiReactionPicker.web.tsx index 8740330575..7343a675e4 100644 --- a/src/components/dms/EmojiReactionPicker.web.tsx +++ b/src/components/dms/EmojiReactionPicker.web.tsx @@ -2,7 +2,7 @@ import {useState} from 'react' import {Pressable, View} from 'react-native' import {type ChatBskyConvoDefs} from '@atproto/api' import {useLingui} from '@lingui/react/macro' -import {DropdownMenu} from 'radix-ui' +import * as DropdownMenu from '@radix-ui/react-dropdown-menu' import {useSession} from '#/state/session' import {atoms as a, flatten, useTheme} from '#/alf'