fix(web): remove private react-native imports in Fusebox DevTools bootstrap - #399
Merged
Conversation
…tstrap Vendors setUpFuseboxReactDevToolsDispatcher and flattenStyle locally (both fully self-contained), and replaces the ReactNativeStyleAttributes import with just the list of attribute names it's actually used for (Object.keys(...) in fuseboxConnection.ts), avoiding the private process*/featureflags modules that table pulls in. Avoids breakage under React Native's Strict TypeScript API, which blocks deep imports into Libraries/* and src/private/*. Claude-Session: https://claude.ai/code/session_01JaNGs52mExzVBMFbjLgWgo
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
@rozenite/web's React DevTools Fusebox bootstrap imported three private React Native modules —react-native/src/private/devsupport/rndevtools/setUpFuseboxReactDevToolsDispatcher,react-native/Libraries/Components/View/ReactNativeStyleAttributes, andreact-native/Libraries/StyleSheet/flattenStyle. These deep import paths resolve tonullunder React Native's Strict TypeScript API, which breaks module resolution for apps that opt into it.This PR vendors local equivalents instead, each with a link back to the exact upstream source it was copied/derived from.
Related Issue
Closes #397
Context
fuseboxReactDevToolsDispatcher.ts—setUpFuseboxReactDevToolsDispatcher.jsis fully self-contained (no further RN-internal imports), so it's vendored near-verbatim (Flow → TS). Added one improvement over upstream: theObject.definePropertycall is now guarded to no-op if the global is already defined, instead of unconditionally throwing on a non-configurable redefinition.flattenStyle.ts—flattenStyle.jsis also fully self-contained (a pure recursive array-flattening function), vendored near-verbatim.nativeStyleEditorValidAttributes.ts—ReactNativeStyleAttributes.jspulls in 11 other privateLibraries/StyleSheet/process*modules plus the private feature-flags module to build a table of{process, diff}value objects per style attribute. ButfuseboxConnection.tsonly ever callsObject.keys(ReactNativeStyleAttributes)— the value objects (and everything they depend on) are never read. So instead of vendoring the whole table, this vendors just the list of the same 150 attribute names (verified 1:1 against the upstream key list), which needed no further private imports at all.fuseboxConnection.tsanddevtools.tsupdated accordingly:ReactNativeStyleAttributesdeps/param renamed tonativeStyleEditorValidAttributes: string[], with theObject.keys(...)call removed fromfuseboxConnection.tssince the caller now passes the name list directly.Testing
pnpm --filter @rozenite/web typecheck(bothtsconfig.lib.jsonandtsconfig.react-native.json)pnpm --filter @rozenite/web lintpnpm vitest --run packages/web— 12 tests passed