diff --git a/jest.config.js b/jest.config.js index 6e98ae747ea4..a91ef75838af 100644 --- a/jest.config.js +++ b/jest.config.js @@ -32,6 +32,8 @@ module.exports = { '/packages/react-native/src/react-private-interface.js', '^react-native/setup-env$': '/packages/react-native/src/setup-env.js', + '^react-native/unstable-internals-do-not-use$': + '/packages/react-native/src/unstable-internals-do-not-use.js', }, setupFiles: ['./packages/jest-preset/jest/local-setup.js'], fakeTimers: { diff --git a/packages/babel-plugin-codegen/__tests__/__snapshots__/index-test.js.snap b/packages/babel-plugin-codegen/__tests__/__snapshots__/index-test.js.snap index c038ee55988e..f86c0eaa8a0b 100644 --- a/packages/babel-plugin-codegen/__tests__/__snapshots__/index-test.js.snap +++ b/packages/babel-plugin-codegen/__tests__/__snapshots__/index-test.js.snap @@ -15,7 +15,9 @@ interface NativeCommands { +seek: (viewRef: React.ElementRef, position: number) => void, +stop: (viewRef: React.ElementRef) => void, } -const NativeComponentRegistry = require('react-native/Libraries/NativeComponent/NativeComponentRegistry'); +const { + NativeComponentRegistry +} = require('react-native'); let nativeComponentName = 'Module'; export const __INTERNAL_VIEW_CONFIG = { uiViewClassName: \\"Module\\", @@ -39,7 +41,9 @@ interface NativeCommands { +pause: (viewRef: React.ElementRef) => void, +play: (viewRef: React.ElementRef) => void, } -const NativeComponentRegistry = require('react-native/Libraries/NativeComponent/NativeComponentRegistry'); +const { + NativeComponentRegistry +} = require('react-native'); let nativeComponentName = 'Module'; export const __INTERNAL_VIEW_CONFIG = { uiViewClassName: \\"Module\\", @@ -63,7 +67,9 @@ interface NativeCommands { +mute: (viewRef: React.ElementRef) => void, +unmute: (viewRef: React.ElementRef) => void, } -const NativeComponentRegistry = require('react-native/Libraries/NativeComponent/NativeComponentRegistry'); +const { + NativeComponentRegistry +} = require('react-native'); let nativeComponentName = 'Module'; export const __INTERNAL_VIEW_CONFIG = { uiViewClassName: \\"Module\\", @@ -93,13 +99,15 @@ interface NativeCommands { +hotspotUpdate: (viewRef: React.ElementRef, x: Int32, y: Int32) => void, +scrollTo: (viewRef: React.ElementRef, y: Int32, animated: boolean) => void, } -const NativeComponentRegistry = require('react-native/Libraries/NativeComponent/NativeComponentRegistry'); const { ConditionallyIgnoredEventHandlers -} = require('react-native/Libraries/NativeComponent/ViewConfigIgnore'); +} = require('react-native/unstable-internals-do-not-use'); const { - dispatchCommand -} = require(\\"react-native/Libraries/ReactNative/RendererProxy\\"); + NativeComponentRegistry +} = require('react-native'); +const { + Renderer +} = require(\\"react-native/unstable-internals-do-not-use\\"); let nativeComponentName = 'RCTModule'; export const __INTERNAL_VIEW_CONFIG = { uiViewClassName: \\"RCTModule\\", @@ -127,10 +135,10 @@ export const __INTERNAL_VIEW_CONFIG = { export default NativeComponentRegistry.get(nativeComponentName, () => __INTERNAL_VIEW_CONFIG); export const Commands = { hotspotUpdate(ref, x, y) { - dispatchCommand(ref, \\"hotspotUpdate\\", [x, y]); + Renderer.dispatchCommand(ref, \\"hotspotUpdate\\", [x, y]); }, scrollTo(ref, y, animated) { - dispatchCommand(ref, \\"scrollTo\\", [y, animated]); + Renderer.dispatchCommand(ref, \\"scrollTo\\", [y, animated]); } };" `; @@ -156,13 +164,15 @@ interface NativeCommands { +hotspotUpdate: (viewRef: React.ElementRef, x: Int32, y: Int32) => void, +scrollTo: (viewRef: React.ElementRef, y: Int32, animated: boolean) => void, } -const NativeComponentRegistry = require('react-native/Libraries/NativeComponent/NativeComponentRegistry'); const { ConditionallyIgnoredEventHandlers -} = require('react-native/Libraries/NativeComponent/ViewConfigIgnore'); +} = require('react-native/unstable-internals-do-not-use'); +const { + NativeComponentRegistry +} = require('react-native'); const { - dispatchCommand -} = require(\\"react-native/Libraries/ReactNative/RendererProxy\\"); + Renderer +} = require(\\"react-native/unstable-internals-do-not-use\\"); let nativeComponentName = 'RCTModule'; export const __INTERNAL_VIEW_CONFIG = { uiViewClassName: \\"RCTModule\\", @@ -190,10 +200,10 @@ export const __INTERNAL_VIEW_CONFIG = { export default NativeComponentRegistry.get(nativeComponentName, () => __INTERNAL_VIEW_CONFIG); export const Commands = { hotspotUpdate(ref, x, y) { - dispatchCommand(ref, \\"hotspotUpdate\\", [x, y]); + Renderer.dispatchCommand(ref, \\"hotspotUpdate\\", [x, y]); }, scrollTo(ref, y, animated) { - dispatchCommand(ref, \\"scrollTo\\", [y, animated]); + Renderer.dispatchCommand(ref, \\"scrollTo\\", [y, animated]); } };" `; diff --git a/packages/eslint-plugin-specs/__tests__/react-native-modules-test.js b/packages/eslint-plugin-specs/__tests__/react-native-modules-test.js index 7785db83139f..3235c1969427 100644 --- a/packages/eslint-plugin-specs/__tests__/react-native-modules-test.js +++ b/packages/eslint-plugin-specs/__tests__/react-native-modules-test.js @@ -20,11 +20,10 @@ const eslintTester = new ESLintTester(); const VALID_SPECS = [ { code: ` -import {TurboModuleRegistry, type TurboModule} from 'react-native'; -import type {UnsafeObject} from 'react-native/Libraries/Types/CodegenTypes'; +import {TurboModuleRegistry, type CodegenTypes, type TurboModule} from 'react-native'; export interface Spec extends TurboModule { - func1(a: string): UnsafeObject, + func1(a: string): CodegenTypes.UnsafeObject, } export default TurboModuleRegistry.get('XYZ'); `, diff --git a/packages/jest-preset/jest-preset.js b/packages/jest-preset/jest-preset.js index 720a73efdca4..81f226a8e43c 100644 --- a/packages/jest-preset/jest-preset.js +++ b/packages/jest-preset/jest-preset.js @@ -18,13 +18,13 @@ module.exports = { platforms: ['android', 'ios', 'native'], }, moduleNameMapper: { - // `setup-env` and `react-private-interface` are secondary entry points - // exposed via the package's `exports`, but `./jest/resolver.js` strips - // `exports` and the generic mapper below resolves subpaths as literal - // directory paths. Alias them explicitly so they resolve to their `src/` - // implementations. + // These secondary entry points are exposed via the package's `exports`, + // but `./jest/resolver.js` strips `exports` and the generic mapper below + // resolves subpaths as literal directory paths. Alias them explicitly so + // they resolve to their `src/` implementations. '^react-native/react-private-interface$': `${path.dirname(require.resolve('react-native'))}/src/react-private-interface.js`, '^react-native/setup-env$': `${path.dirname(require.resolve('react-native'))}/src/setup-env.js`, + '^react-native/unstable-internals-do-not-use$': `${path.dirname(require.resolve('react-native'))}/src/unstable-internals-do-not-use.js`, '^react-native($|/.*)': `${path.dirname(require.resolve('react-native'))}/$1`, }, resolver: require.resolve('./jest/resolver.js'), diff --git a/packages/jest-preset/jest/mocks/ActivityIndicator.js b/packages/jest-preset/jest/mocks/ActivityIndicator.js index 42b6075a5a51..71499a60a321 100644 --- a/packages/jest-preset/jest/mocks/ActivityIndicator.js +++ b/packages/jest-preset/jest/mocks/ActivityIndicator.js @@ -9,7 +9,7 @@ */ import typeof * as TmockComponent from '../mockComponent'; -import typeof TActivityIndicator from 'react-native/Libraries/Components/ActivityIndicator/ActivityIndicator'; +import typeof {ActivityIndicator as TActivityIndicator} from 'react-native'; const mockComponent = jest.requireActual('../mockComponent').default; diff --git a/packages/jest-preset/jest/mocks/Image.js b/packages/jest-preset/jest/mocks/Image.js index 8d65ba8a488a..39e335889979 100644 --- a/packages/jest-preset/jest/mocks/Image.js +++ b/packages/jest-preset/jest/mocks/Image.js @@ -9,7 +9,7 @@ */ import typeof * as TmockComponent from '../mockComponent'; -import typeof TImage from 'react-native/Libraries/Image/Image'; +import typeof {Image as TImage} from 'react-native'; const mockComponent = jest.requireActual('../mockComponent').default; diff --git a/packages/jest-preset/jest/mocks/Modal.js b/packages/jest-preset/jest/mocks/Modal.js index d8514d27a44c..e099887ded47 100644 --- a/packages/jest-preset/jest/mocks/Modal.js +++ b/packages/jest-preset/jest/mocks/Modal.js @@ -9,7 +9,7 @@ */ import typeof * as TmockComponent from '../mockComponent'; -import type {ModalProps} from 'react-native/Libraries/Modal/Modal'; +import type {ModalProps} from 'react-native'; const mockComponent = jest.requireActual('../mockComponent').default; diff --git a/packages/jest-preset/jest/mocks/RefreshControl.js b/packages/jest-preset/jest/mocks/RefreshControl.js index cb9800dbbb75..d7a1c072660d 100644 --- a/packages/jest-preset/jest/mocks/RefreshControl.js +++ b/packages/jest-preset/jest/mocks/RefreshControl.js @@ -8,7 +8,7 @@ * @format */ -import type {RefreshControlProps} from 'react-native/Libraries/Components/RefreshControl/RefreshControl'; +import type {RefreshControlProps} from 'react-native'; import type {HostComponent} from 'react-native/src/private/types/HostComponent'; import * as React from 'react'; diff --git a/packages/jest-preset/jest/mocks/ScrollView.js b/packages/jest-preset/jest/mocks/ScrollView.js index 39d8f69af9d1..06a1bf85e4dc 100644 --- a/packages/jest-preset/jest/mocks/ScrollView.js +++ b/packages/jest-preset/jest/mocks/ScrollView.js @@ -10,7 +10,7 @@ import typeof * as TmockComponent from '../mockComponent'; import typeof * as TMockNativeMethods from '../MockNativeMethods'; -import typeof TScrollView from 'react-native/Libraries/Components/ScrollView/ScrollView'; +import typeof {ScrollView as TScrollView} from 'react-native'; import type {ScrollViewNativeProps} from 'react-native/Libraries/Components/ScrollView/ScrollViewNativeComponentType'; import * as React from 'react'; diff --git a/packages/jest-preset/jest/mocks/Text.js b/packages/jest-preset/jest/mocks/Text.js index da56850e8a30..89f33c0b35e0 100644 --- a/packages/jest-preset/jest/mocks/Text.js +++ b/packages/jest-preset/jest/mocks/Text.js @@ -10,7 +10,7 @@ import typeof * as TmockComponent from '../mockComponent'; import typeof * as TMockNativeMethods from '../MockNativeMethods'; -import typeof TText from 'react-native/Libraries/Text/Text'; +import typeof {Text as TText} from 'react-native'; const mockComponent = jest.requireActual('../mockComponent').default; diff --git a/packages/jest-preset/jest/mocks/TextInput.js b/packages/jest-preset/jest/mocks/TextInput.js index fc34a8b65dcf..b74e7ab8a926 100644 --- a/packages/jest-preset/jest/mocks/TextInput.js +++ b/packages/jest-preset/jest/mocks/TextInput.js @@ -10,7 +10,7 @@ import typeof * as TmockComponent from '../mockComponent'; import typeof * as TMockNativeMethods from '../MockNativeMethods'; -import typeof TTextInput from 'react-native/Libraries/Components/TextInput/TextInput'; +import typeof {TextInput as TTextInput} from 'react-native'; const mockComponent = jest.requireActual('../mockComponent').default; diff --git a/packages/jest-preset/jest/mocks/View.js b/packages/jest-preset/jest/mocks/View.js index dca384233d21..fce3ca9fca0c 100644 --- a/packages/jest-preset/jest/mocks/View.js +++ b/packages/jest-preset/jest/mocks/View.js @@ -10,7 +10,7 @@ import typeof * as TmockComponent from '../mockComponent'; import typeof * as TMockNativeMethods from '../MockNativeMethods'; -import typeof TView from 'react-native/Libraries/Components/View/View'; +import typeof {View as TView} from 'react-native'; const mockComponent = jest.requireActual('../mockComponent').default; diff --git a/packages/jest-preset/jest/mocks/ViewNativeComponent.js b/packages/jest-preset/jest/mocks/ViewNativeComponent.js index 716bd4c89a3c..4f6ca6f36eae 100644 --- a/packages/jest-preset/jest/mocks/ViewNativeComponent.js +++ b/packages/jest-preset/jest/mocks/ViewNativeComponent.js @@ -8,7 +8,7 @@ * @format */ -import type {ViewProps} from 'react-native/Libraries/Components/View/ViewPropTypes'; +import type {ViewProps} from 'react-native'; import * as React from 'react'; import {createElement} from 'react'; diff --git a/packages/react-native-babel-preset/src/__tests__/transform-snapshot-test.js b/packages/react-native-babel-preset/src/__tests__/transform-snapshot-test.js index fb50cec1c5f4..55390bcabf23 100644 --- a/packages/react-native-babel-preset/src/__tests__/transform-snapshot-test.js +++ b/packages/react-native-babel-preset/src/__tests__/transform-snapshot-test.js @@ -316,9 +316,11 @@ describe('react-native-babel-preset transform snapshots', () => { it('runs codegen when the type arguments are separated by trivia', () => { const code = ` // @flow strict-local - import type {ViewProps} from 'react-native'; - import type {HostComponent} from 'react-native'; - import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent'; + import { + codegenNativeComponent, + type HostComponent, + type ViewProps, + } from 'react-native'; type NativeProps = Readonly<{ ...ViewProps, diff --git a/packages/react-native-codegen/e2e/deep_imports/__tests__/components/__snapshots__/GenerateViewConfigJs-test.js.snap b/packages/react-native-codegen/e2e/deep_imports/__tests__/components/__snapshots__/GenerateViewConfigJs-test.js.snap index bb0a9098fc04..7eb32dcd4bc1 100644 --- a/packages/react-native-codegen/e2e/deep_imports/__tests__/components/__snapshots__/GenerateViewConfigJs-test.js.snap +++ b/packages/react-native-codegen/e2e/deep_imports/__tests__/components/__snapshots__/GenerateViewConfigJs-test.js.snap @@ -16,7 +16,7 @@ Map { 'use strict'; -const NativeComponentRegistry = require('react-native/Libraries/NativeComponent/NativeComponentRegistry'); +const {NativeComponentRegistry} = require('react-native'); let nativeComponentName = 'ArrayPropsNativeComponentView'; export const __INTERNAL_VIEW_CONFIG = { @@ -27,7 +27,7 @@ export const __INTERNAL_VIEW_CONFIG = { progress: true, radii: true, colors: { - process: (req => 'default' in req ? req.default : req)(require('react-native/Libraries/StyleSheet/processColorArray')) + process: require('react-native/unstable-internals-do-not-use').processColorArray }, srcs: true, points: true, @@ -60,7 +60,7 @@ Map { 'use strict'; -const NativeComponentRegistry = require('react-native/Libraries/NativeComponent/NativeComponentRegistry'); +const {NativeComponentRegistry} = require('react-native'); let nativeComponentName = 'BooleanPropNativeComponentView'; export const __INTERNAL_VIEW_CONFIG = { @@ -91,13 +91,13 @@ Map { 'use strict'; -const NativeComponentRegistry = require('react-native/Libraries/NativeComponent/NativeComponentRegistry'); +const {NativeComponentRegistry} = require('react-native'); let nativeComponentName = 'ColorPropNativeComponentView'; export const __INTERNAL_VIEW_CONFIG = { uiViewClassName: \\"ColorPropNativeComponentView\\", validAttributes: { - tintColor: require('react-native/Libraries/Components/View/ReactNativeStyleAttributes').colorAttribute + tintColor: require('react-native/unstable-internals-do-not-use').colorAttribute } }; export default NativeComponentRegistry.get(nativeComponentName, () => __INTERNAL_VIEW_CONFIG); @@ -121,7 +121,7 @@ Map { 'use strict'; -const NativeComponentRegistry = require('react-native/Libraries/NativeComponent/NativeComponentRegistry'); +const {NativeComponentRegistry} = require('react-native'); let nativeComponentName = 'DimensionPropNativeComponentView'; export const __INTERNAL_VIEW_CONFIG = { @@ -151,7 +151,7 @@ Map { 'use strict'; -const NativeComponentRegistry = require('react-native/Libraries/NativeComponent/NativeComponentRegistry'); +const {NativeComponentRegistry} = require('react-native'); let nativeComponentName = 'EdgeInsetsPropNativeComponentView'; export const __INTERNAL_VIEW_CONFIG = { @@ -179,7 +179,7 @@ Map { 'use strict'; -const NativeComponentRegistry = require('react-native/Libraries/NativeComponent/NativeComponentRegistry'); +const {NativeComponentRegistry} = require('react-native'); let nativeComponentName = 'EnumPropNativeComponentView'; export const __INTERNAL_VIEW_CONFIG = { @@ -210,8 +210,8 @@ Map { 'use strict'; -const NativeComponentRegistry = require('react-native/Libraries/NativeComponent/NativeComponentRegistry'); -const {ConditionallyIgnoredEventHandlers} = require('react-native/Libraries/NativeComponent/ViewConfigIgnore'); +const {ConditionallyIgnoredEventHandlers} = require('react-native/unstable-internals-do-not-use'); +const {NativeComponentRegistry} = require('react-native'); let nativeComponentName = 'EventNestedObjectPropsNativeComponentView'; export const __INTERNAL_VIEW_CONFIG = { @@ -252,8 +252,8 @@ Map { 'use strict'; -const NativeComponentRegistry = require('react-native/Libraries/NativeComponent/NativeComponentRegistry'); -const {ConditionallyIgnoredEventHandlers} = require('react-native/Libraries/NativeComponent/ViewConfigIgnore'); +const {ConditionallyIgnoredEventHandlers} = require('react-native/unstable-internals-do-not-use'); +const {NativeComponentRegistry} = require('react-native'); let nativeComponentName = 'EventPropsNativeComponentView'; export const __INTERNAL_VIEW_CONFIG = { @@ -322,7 +322,7 @@ Map { 'use strict'; -const NativeComponentRegistry = require('react-native/Libraries/NativeComponent/NativeComponentRegistry'); +const {NativeComponentRegistry} = require('react-native'); let nativeComponentName = 'FloatPropsNativeComponentView'; export const __INTERNAL_VIEW_CONFIG = { @@ -358,14 +358,14 @@ Map { 'use strict'; -const NativeComponentRegistry = require('react-native/Libraries/NativeComponent/NativeComponentRegistry'); +const {NativeComponentRegistry} = require('react-native'); let nativeComponentName = 'ImagePropNativeComponentView'; export const __INTERNAL_VIEW_CONFIG = { uiViewClassName: \\"ImagePropNativeComponentView\\", validAttributes: { thumbImage: { - process: (req => 'default' in req ? req.default : req)(require('react-native/Libraries/Image/resolveAssetSource')) + process: require('react-native').Image.resolveAssetSource } } }; @@ -390,7 +390,7 @@ Map { 'use strict'; -const NativeComponentRegistry = require('react-native/Libraries/NativeComponent/NativeComponentRegistry'); +const {NativeComponentRegistry} = require('react-native'); let nativeComponentName = 'IntegerPropNativeComponentView'; export const __INTERNAL_VIEW_CONFIG = { @@ -422,8 +422,8 @@ Map { 'use strict'; -const NativeComponentRegistry = require('react-native/Libraries/NativeComponent/NativeComponentRegistry'); -const {ConditionallyIgnoredEventHandlers} = require('react-native/Libraries/NativeComponent/ViewConfigIgnore'); +const {ConditionallyIgnoredEventHandlers} = require('react-native/unstable-internals-do-not-use'); +const {NativeComponentRegistry} = require('react-native'); let nativeComponentName = 'RCTInterfaceOnlyComponent'; export const __INTERNAL_VIEW_CONFIG = { @@ -464,7 +464,7 @@ Map { 'use strict'; -const NativeComponentRegistry = require('react-native/Libraries/NativeComponent/NativeComponentRegistry'); +const {NativeComponentRegistry} = require('react-native'); let nativeComponentName = 'MixedPropNativeComponentView'; export const __INTERNAL_VIEW_CONFIG = { @@ -494,19 +494,19 @@ Map { 'use strict'; -const NativeComponentRegistry = require('react-native/Libraries/NativeComponent/NativeComponentRegistry'); +const {NativeComponentRegistry} = require('react-native'); let nativeComponentName = 'MultiNativePropNativeComponentView'; export const __INTERNAL_VIEW_CONFIG = { uiViewClassName: \\"MultiNativePropNativeComponentView\\", validAttributes: { thumbImage: { - process: (req => 'default' in req ? req.default : req)(require('react-native/Libraries/Image/resolveAssetSource')) + process: require('react-native').Image.resolveAssetSource }, - color: require('react-native/Libraries/Components/View/ReactNativeStyleAttributes').colorAttribute, - thumbTintColor: require('react-native/Libraries/Components/View/ReactNativeStyleAttributes').colorAttribute, + color: require('react-native/unstable-internals-do-not-use').colorAttribute, + thumbTintColor: require('react-native/unstable-internals-do-not-use').colorAttribute, point: { - diff: (req => 'default' in req ? req.default : req)(require('react-native/Libraries/Utilities/differ/pointsDiffer')) + diff: require('react-native/unstable-internals-do-not-use').pointsDiffer } } }; @@ -531,7 +531,7 @@ Map { 'use strict'; -const NativeComponentRegistry = require('react-native/Libraries/NativeComponent/NativeComponentRegistry'); +const {NativeComponentRegistry} = require('react-native'); let nativeComponentName = 'NoPropsNoEventsNativeComponentView'; export const __INTERNAL_VIEW_CONFIG = { @@ -559,7 +559,7 @@ Map { 'use strict'; -const NativeComponentRegistry = require('react-native/Libraries/NativeComponent/NativeComponentRegistry'); +const {NativeComponentRegistry} = require('react-native'); let nativeComponentName = 'ObjectPropsNativeComponent'; export const __INTERNAL_VIEW_CONFIG = { @@ -591,14 +591,14 @@ Map { 'use strict'; -const NativeComponentRegistry = require('react-native/Libraries/NativeComponent/NativeComponentRegistry'); +const {NativeComponentRegistry} = require('react-native'); let nativeComponentName = 'PointPropNativeComponentView'; export const __INTERNAL_VIEW_CONFIG = { uiViewClassName: \\"PointPropNativeComponentView\\", validAttributes: { startPoint: { - diff: (req => 'default' in req ? req.default : req)(require('react-native/Libraries/Utilities/differ/pointsDiffer')) + diff: require('react-native/unstable-internals-do-not-use').pointsDiffer } } }; @@ -623,7 +623,7 @@ Map { 'use strict'; -const NativeComponentRegistry = require('react-native/Libraries/NativeComponent/NativeComponentRegistry'); +const {NativeComponentRegistry} = require('react-native'); let nativeComponentName = 'StringPropNativeComponentView'; export const __INTERNAL_VIEW_CONFIG = { diff --git a/packages/react-native-codegen/e2e/namespaced/__tests__/components/__snapshots__/GenerateViewConfigJs-test.js.snap b/packages/react-native-codegen/e2e/namespaced/__tests__/components/__snapshots__/GenerateViewConfigJs-test.js.snap index 054bd1a003bf..4864828d5d67 100644 --- a/packages/react-native-codegen/e2e/namespaced/__tests__/components/__snapshots__/GenerateViewConfigJs-test.js.snap +++ b/packages/react-native-codegen/e2e/namespaced/__tests__/components/__snapshots__/GenerateViewConfigJs-test.js.snap @@ -16,7 +16,7 @@ Map { 'use strict'; -const NativeComponentRegistry = require('react-native/Libraries/NativeComponent/NativeComponentRegistry'); +const {NativeComponentRegistry} = require('react-native'); let nativeComponentName = 'ArrayPropsNativeComponentView'; export const __INTERNAL_VIEW_CONFIG = { @@ -27,7 +27,7 @@ export const __INTERNAL_VIEW_CONFIG = { progress: true, radii: true, colors: { - process: (req => 'default' in req ? req.default : req)(require('react-native/Libraries/StyleSheet/processColorArray')) + process: require('react-native/unstable-internals-do-not-use').processColorArray }, srcs: true, points: true, @@ -60,7 +60,7 @@ Map { 'use strict'; -const NativeComponentRegistry = require('react-native/Libraries/NativeComponent/NativeComponentRegistry'); +const {NativeComponentRegistry} = require('react-native'); let nativeComponentName = 'BooleanPropNativeComponentView'; export const __INTERNAL_VIEW_CONFIG = { @@ -91,13 +91,13 @@ Map { 'use strict'; -const NativeComponentRegistry = require('react-native/Libraries/NativeComponent/NativeComponentRegistry'); +const {NativeComponentRegistry} = require('react-native'); let nativeComponentName = 'ColorPropNativeComponentView'; export const __INTERNAL_VIEW_CONFIG = { uiViewClassName: \\"ColorPropNativeComponentView\\", validAttributes: { - tintColor: require('react-native/Libraries/Components/View/ReactNativeStyleAttributes').colorAttribute + tintColor: require('react-native/unstable-internals-do-not-use').colorAttribute } }; export default NativeComponentRegistry.get(nativeComponentName, () => __INTERNAL_VIEW_CONFIG); @@ -121,7 +121,7 @@ Map { 'use strict'; -const NativeComponentRegistry = require('react-native/Libraries/NativeComponent/NativeComponentRegistry'); +const {NativeComponentRegistry} = require('react-native'); let nativeComponentName = 'DimensionPropNativeComponentView'; export const __INTERNAL_VIEW_CONFIG = { @@ -151,7 +151,7 @@ Map { 'use strict'; -const NativeComponentRegistry = require('react-native/Libraries/NativeComponent/NativeComponentRegistry'); +const {NativeComponentRegistry} = require('react-native'); let nativeComponentName = 'EdgeInsetsPropNativeComponentView'; export const __INTERNAL_VIEW_CONFIG = { @@ -179,7 +179,7 @@ Map { 'use strict'; -const NativeComponentRegistry = require('react-native/Libraries/NativeComponent/NativeComponentRegistry'); +const {NativeComponentRegistry} = require('react-native'); let nativeComponentName = 'EnumPropNativeComponentView'; export const __INTERNAL_VIEW_CONFIG = { @@ -210,8 +210,8 @@ Map { 'use strict'; -const NativeComponentRegistry = require('react-native/Libraries/NativeComponent/NativeComponentRegistry'); -const {ConditionallyIgnoredEventHandlers} = require('react-native/Libraries/NativeComponent/ViewConfigIgnore'); +const {ConditionallyIgnoredEventHandlers} = require('react-native/unstable-internals-do-not-use'); +const {NativeComponentRegistry} = require('react-native'); let nativeComponentName = 'EventNestedObjectPropsNativeComponentView'; export const __INTERNAL_VIEW_CONFIG = { @@ -252,8 +252,8 @@ Map { 'use strict'; -const NativeComponentRegistry = require('react-native/Libraries/NativeComponent/NativeComponentRegistry'); -const {ConditionallyIgnoredEventHandlers} = require('react-native/Libraries/NativeComponent/ViewConfigIgnore'); +const {ConditionallyIgnoredEventHandlers} = require('react-native/unstable-internals-do-not-use'); +const {NativeComponentRegistry} = require('react-native'); let nativeComponentName = 'EventPropsNativeComponentView'; export const __INTERNAL_VIEW_CONFIG = { @@ -322,7 +322,7 @@ Map { 'use strict'; -const NativeComponentRegistry = require('react-native/Libraries/NativeComponent/NativeComponentRegistry'); +const {NativeComponentRegistry} = require('react-native'); let nativeComponentName = 'FloatPropsNativeComponentView'; export const __INTERNAL_VIEW_CONFIG = { @@ -358,14 +358,14 @@ Map { 'use strict'; -const NativeComponentRegistry = require('react-native/Libraries/NativeComponent/NativeComponentRegistry'); +const {NativeComponentRegistry} = require('react-native'); let nativeComponentName = 'ImagePropNativeComponentView'; export const __INTERNAL_VIEW_CONFIG = { uiViewClassName: \\"ImagePropNativeComponentView\\", validAttributes: { thumbImage: { - process: (req => 'default' in req ? req.default : req)(require('react-native/Libraries/Image/resolveAssetSource')) + process: require('react-native').Image.resolveAssetSource } } }; @@ -390,7 +390,7 @@ Map { 'use strict'; -const NativeComponentRegistry = require('react-native/Libraries/NativeComponent/NativeComponentRegistry'); +const {NativeComponentRegistry} = require('react-native'); let nativeComponentName = 'IntegerPropNativeComponentView'; export const __INTERNAL_VIEW_CONFIG = { @@ -422,8 +422,8 @@ Map { 'use strict'; -const NativeComponentRegistry = require('react-native/Libraries/NativeComponent/NativeComponentRegistry'); -const {ConditionallyIgnoredEventHandlers} = require('react-native/Libraries/NativeComponent/ViewConfigIgnore'); +const {ConditionallyIgnoredEventHandlers} = require('react-native/unstable-internals-do-not-use'); +const {NativeComponentRegistry} = require('react-native'); let nativeComponentName = 'RCTInterfaceOnlyComponent'; export const __INTERNAL_VIEW_CONFIG = { @@ -464,7 +464,7 @@ Map { 'use strict'; -const NativeComponentRegistry = require('react-native/Libraries/NativeComponent/NativeComponentRegistry'); +const {NativeComponentRegistry} = require('react-native'); let nativeComponentName = 'MixedPropNativeComponentView'; export const __INTERNAL_VIEW_CONFIG = { @@ -494,19 +494,19 @@ Map { 'use strict'; -const NativeComponentRegistry = require('react-native/Libraries/NativeComponent/NativeComponentRegistry'); +const {NativeComponentRegistry} = require('react-native'); let nativeComponentName = 'MultiNativePropNativeComponentView'; export const __INTERNAL_VIEW_CONFIG = { uiViewClassName: \\"MultiNativePropNativeComponentView\\", validAttributes: { thumbImage: { - process: (req => 'default' in req ? req.default : req)(require('react-native/Libraries/Image/resolveAssetSource')) + process: require('react-native').Image.resolveAssetSource }, - color: require('react-native/Libraries/Components/View/ReactNativeStyleAttributes').colorAttribute, - thumbTintColor: require('react-native/Libraries/Components/View/ReactNativeStyleAttributes').colorAttribute, + color: require('react-native/unstable-internals-do-not-use').colorAttribute, + thumbTintColor: require('react-native/unstable-internals-do-not-use').colorAttribute, point: { - diff: (req => 'default' in req ? req.default : req)(require('react-native/Libraries/Utilities/differ/pointsDiffer')) + diff: require('react-native/unstable-internals-do-not-use').pointsDiffer } } }; @@ -531,7 +531,7 @@ Map { 'use strict'; -const NativeComponentRegistry = require('react-native/Libraries/NativeComponent/NativeComponentRegistry'); +const {NativeComponentRegistry} = require('react-native'); let nativeComponentName = 'NoPropsNoEventsNativeComponentView'; export const __INTERNAL_VIEW_CONFIG = { @@ -559,7 +559,7 @@ Map { 'use strict'; -const NativeComponentRegistry = require('react-native/Libraries/NativeComponent/NativeComponentRegistry'); +const {NativeComponentRegistry} = require('react-native'); let nativeComponentName = 'ObjectPropsNativeComponent'; export const __INTERNAL_VIEW_CONFIG = { @@ -591,14 +591,14 @@ Map { 'use strict'; -const NativeComponentRegistry = require('react-native/Libraries/NativeComponent/NativeComponentRegistry'); +const {NativeComponentRegistry} = require('react-native'); let nativeComponentName = 'PointPropNativeComponentView'; export const __INTERNAL_VIEW_CONFIG = { uiViewClassName: \\"PointPropNativeComponentView\\", validAttributes: { startPoint: { - diff: (req => 'default' in req ? req.default : req)(require('react-native/Libraries/Utilities/differ/pointsDiffer')) + diff: require('react-native/unstable-internals-do-not-use').pointsDiffer } } }; @@ -623,7 +623,7 @@ Map { 'use strict'; -const NativeComponentRegistry = require('react-native/Libraries/NativeComponent/NativeComponentRegistry'); +const {NativeComponentRegistry} = require('react-native'); let nativeComponentName = 'StringPropNativeComponentView'; export const __INTERNAL_VIEW_CONFIG = { diff --git a/packages/react-native-codegen/src/generators/components/GenerateViewConfigJs.js b/packages/react-native-codegen/src/generators/components/GenerateViewConfigJs.js index 50d8d53b0f9c..d9e4de50bf98 100644 --- a/packages/react-native-codegen/src/generators/components/GenerateViewConfigJs.js +++ b/packages/react-native-codegen/src/generators/components/GenerateViewConfigJs.js @@ -55,7 +55,9 @@ ${componentConfig} // We use this to add to a set. Need to make sure we aren't importing // this multiple times. -const UIMANAGER_IMPORT = 'const {UIManager} = require("react-native")'; +const UIMANAGER_IMPORT = 'const {UIManager} = require("react-native");'; +const RENDERER_IMPORT = + 'const {Renderer} = require("react-native/unstable-internals-do-not-use");'; function expression(input: string) { return core.template.expression(input)(); @@ -77,21 +79,21 @@ function getReactDiffProcessValue(typeAnnotation: PropTypeAnnotation) { switch (typeAnnotation.name) { case 'ColorPrimitive': return expression( - "require('react-native/Libraries/Components/View/ReactNativeStyleAttributes').colorAttribute", + "require('react-native/unstable-internals-do-not-use').colorAttribute", ); case 'ImageSourcePrimitive': return expression( - "{ process: ((req) => 'default' in req ? req.default : req)(require('react-native/Libraries/Image/resolveAssetSource')) }", + "{ process: require('react-native').Image.resolveAssetSource }", ); case 'ImageRequestPrimitive': throw new Error('ImageRequest should not be used in props'); case 'PointPrimitive': return expression( - "{ diff: ((req) => 'default' in req ? req.default : req)(require('react-native/Libraries/Utilities/differ/pointsDiffer')) }", + "{ diff: require('react-native/unstable-internals-do-not-use').pointsDiffer }", ); case 'EdgeInsetsPrimitive': return expression( - "{ diff: ((req) => 'default' in req ? req.default : req)(require('react-native/Libraries/Utilities/differ/insetsDiffer')) }", + "{ diff: require('react-native/unstable-internals-do-not-use').insetsDiffer }", ); case 'DimensionPrimitive': return t.booleanLiteral(true); @@ -106,7 +108,7 @@ function getReactDiffProcessValue(typeAnnotation: PropTypeAnnotation) { switch (typeAnnotation.elementType.name) { case 'ColorPrimitive': return expression( - "{ process: ((req) => 'default' in req ? req.default : req)(require('react-native/Libraries/StyleSheet/processColorArray')) }", + "{ process: require('react-native/unstable-internals-do-not-use').processColorArray }", ); case 'ImageSourcePrimitive': case 'PointPrimitive': @@ -192,8 +194,10 @@ function getValidAttributesForEvents( events: ReadonlyArray, imports: Set, ) { + // Generated files can live outside the React Native package, so they cannot + // use a relative import for this implementation detail. imports.add( - "const {ConditionallyIgnoredEventHandlers} = require('react-native/Libraries/NativeComponent/ViewConfigIgnore');", + "const {ConditionallyIgnoredEventHandlers} = require('react-native/unstable-internals-do-not-use');", ); const validAttributes = t.objectExpression( @@ -264,7 +268,7 @@ function buildViewConfig( switch (extendProps.knownTypeName) { case 'ReactNativeCoreViewProps': imports.add( - "const NativeComponentRegistry = require('react-native/Libraries/NativeComponent/NativeComponentRegistry');", + "const {NativeComponentRegistry} = require('react-native');", ); return; @@ -366,9 +370,7 @@ function buildCommands( return null; } - imports.add( - 'const {dispatchCommand} = require("react-native/Libraries/ReactNative/RendererProxy");', - ); + imports.add(RENDERER_IMPORT); const commandsObject = t.objectExpression( commands.map(command => { @@ -376,7 +378,10 @@ function buildCommands( const params = command.typeAnnotation.params; const dispatchCommandCall = t.callExpression( - t.identifier('dispatchCommand'), + t.memberExpression( + t.identifier('Renderer'), + t.identifier('dispatchCommand'), + ), [ t.identifier('ref'), t.stringLiteral(commandName), diff --git a/packages/react-native-codegen/src/generators/components/__tests__/__snapshots__/GenerateViewConfigJs-test.js.snap b/packages/react-native-codegen/src/generators/components/__tests__/__snapshots__/GenerateViewConfigJs-test.js.snap index 7b3d95c37134..2e366a12f550 100644 --- a/packages/react-native-codegen/src/generators/components/__tests__/__snapshots__/GenerateViewConfigJs-test.js.snap +++ b/packages/react-native-codegen/src/generators/components/__tests__/__snapshots__/GenerateViewConfigJs-test.js.snap @@ -16,7 +16,7 @@ Map { 'use strict'; -const NativeComponentRegistry = require('react-native/Libraries/NativeComponent/NativeComponentRegistry'); +const {NativeComponentRegistry} = require('react-native'); let nativeComponentName = 'AllProp'; export const __INTERNAL_VIEW_CONFIG = { @@ -62,7 +62,7 @@ Map { 'use strict'; -const NativeComponentRegistry = require('react-native/Libraries/NativeComponent/NativeComponentRegistry'); +const {NativeComponentRegistry} = require('react-native'); let nativeComponentName = 'AllPropWithOptionalGen'; export const __INTERNAL_VIEW_CONFIG = { @@ -108,7 +108,7 @@ Map { 'use strict'; -const NativeComponentRegistry = require('react-native/Libraries/NativeComponent/NativeComponentRegistry'); +const {NativeComponentRegistry} = require('react-native'); let nativeComponentName = 'AllPropWithOptionalObjectGen'; export const __INTERNAL_VIEW_CONFIG = { @@ -154,7 +154,7 @@ Map { 'use strict'; -const NativeComponentRegistry = require('react-native/Libraries/NativeComponent/NativeComponentRegistry'); +const {NativeComponentRegistry} = require('react-native'); let nativeComponentName = 'ArrayPropsNativeComponent'; export const __INTERNAL_VIEW_CONFIG = { @@ -165,7 +165,7 @@ export const __INTERNAL_VIEW_CONFIG = { progress: true, radii: true, colors: { - process: (req => 'default' in req ? req.default : req)(require('react-native/Libraries/StyleSheet/processColorArray')) + process: require('react-native/unstable-internals-do-not-use').processColorArray }, srcs: true, points: true, @@ -198,7 +198,7 @@ Map { 'use strict'; -const NativeComponentRegistry = require('react-native/Libraries/NativeComponent/NativeComponentRegistry'); +const {NativeComponentRegistry} = require('react-native'); let nativeComponentName = 'ArrayPropsNativeComponent'; export const __INTERNAL_VIEW_CONFIG = { @@ -228,7 +228,7 @@ Map { 'use strict'; -const NativeComponentRegistry = require('react-native/Libraries/NativeComponent/NativeComponentRegistry'); +const {NativeComponentRegistry} = require('react-native'); let nativeComponentName = 'ArrayPropsOptionalGenNativeComponent'; export const __INTERNAL_VIEW_CONFIG = { @@ -258,7 +258,7 @@ Map { 'use strict'; -const NativeComponentRegistry = require('react-native/Libraries/NativeComponent/NativeComponentRegistry'); +const {NativeComponentRegistry} = require('react-native'); let nativeComponentName = 'ArrayPropsOptionalObjectGenNativeComponent'; export const __INTERNAL_VIEW_CONFIG = { @@ -288,7 +288,7 @@ Map { 'use strict'; -const NativeComponentRegistry = require('react-native/Libraries/NativeComponent/NativeComponentRegistry'); +const {NativeComponentRegistry} = require('react-native'); let nativeComponentName = 'ArrayPropsWithOptionalGenNativeComponent'; export const __INTERNAL_VIEW_CONFIG = { @@ -299,7 +299,7 @@ export const __INTERNAL_VIEW_CONFIG = { progress: true, radii: true, colors: { - process: (req => 'default' in req ? req.default : req)(require('react-native/Libraries/StyleSheet/processColorArray')) + process: require('react-native/unstable-internals-do-not-use').processColorArray }, srcs: true, points: true, @@ -332,7 +332,7 @@ Map { 'use strict'; -const NativeComponentRegistry = require('react-native/Libraries/NativeComponent/NativeComponentRegistry'); +const {NativeComponentRegistry} = require('react-native'); let nativeComponentName = 'ArrayPropsWithOptionalObjectGenNativeComponent'; export const __INTERNAL_VIEW_CONFIG = { @@ -343,7 +343,7 @@ export const __INTERNAL_VIEW_CONFIG = { progress: true, radii: true, colors: { - process: (req => 'default' in req ? req.default : req)(require('react-native/Libraries/StyleSheet/processColorArray')) + process: require('react-native/unstable-internals-do-not-use').processColorArray }, srcs: true, points: true, @@ -376,7 +376,7 @@ Map { 'use strict'; -const NativeComponentRegistry = require('react-native/Libraries/NativeComponent/NativeComponentRegistry'); +const {NativeComponentRegistry} = require('react-native'); let nativeComponentName = 'BooleanPropNativeComponent'; export const __INTERNAL_VIEW_CONFIG = { @@ -406,13 +406,13 @@ Map { 'use strict'; -const NativeComponentRegistry = require('react-native/Libraries/NativeComponent/NativeComponentRegistry'); +const {NativeComponentRegistry} = require('react-native'); let nativeComponentName = 'ColorPropNativeComponent'; export const __INTERNAL_VIEW_CONFIG = { uiViewClassName: \\"ColorPropNativeComponent\\", validAttributes: { - tintColor: require('react-native/Libraries/Components/View/ReactNativeStyleAttributes').colorAttribute + tintColor: require('react-native/unstable-internals-do-not-use').colorAttribute } }; export default NativeComponentRegistry.get(nativeComponentName, () => __INTERNAL_VIEW_CONFIG); @@ -436,8 +436,8 @@ Map { 'use strict'; -const NativeComponentRegistry = require('react-native/Libraries/NativeComponent/NativeComponentRegistry'); -const {dispatchCommand} = require(\\"react-native/Libraries/ReactNative/RendererProxy\\"); +const {NativeComponentRegistry} = require('react-native'); +const {Renderer} = require(\\"react-native/unstable-internals-do-not-use\\"); let nativeComponentName = 'CommandNativeComponent'; export const __INTERNAL_VIEW_CONFIG = { @@ -447,10 +447,10 @@ export const __INTERNAL_VIEW_CONFIG = { export default NativeComponentRegistry.get(nativeComponentName, () => __INTERNAL_VIEW_CONFIG); export const Commands = { flashScrollIndicators(ref) { - dispatchCommand(ref, \\"flashScrollIndicators\\", []); + Renderer.dispatchCommand(ref, \\"flashScrollIndicators\\", []); }, allTypes(ref, x, y, z, message, animated, locations) { - dispatchCommand(ref, \\"allTypes\\", [x, y, z, message, animated, locations]); + Renderer.dispatchCommand(ref, \\"allTypes\\", [x, y, z, message, animated, locations]); } }; ", @@ -473,8 +473,8 @@ Map { 'use strict'; -const NativeComponentRegistry = require('react-native/Libraries/NativeComponent/NativeComponentRegistry'); -const {dispatchCommand} = require(\\"react-native/Libraries/ReactNative/RendererProxy\\"); +const {NativeComponentRegistry} = require('react-native'); +const {Renderer} = require(\\"react-native/unstable-internals-do-not-use\\"); let nativeComponentName = 'CommandNativeComponent'; export const __INTERNAL_VIEW_CONFIG = { @@ -486,13 +486,13 @@ export const __INTERNAL_VIEW_CONFIG = { export default NativeComponentRegistry.get(nativeComponentName, () => __INTERNAL_VIEW_CONFIG); export const Commands = { handleRootTag(ref, rootTag) { - dispatchCommand(ref, \\"handleRootTag\\", [rootTag]); + Renderer.dispatchCommand(ref, \\"handleRootTag\\", [rootTag]); }, hotspotUpdate(ref, x, y) { - dispatchCommand(ref, \\"hotspotUpdate\\", [x, y]); + Renderer.dispatchCommand(ref, \\"hotspotUpdate\\", [x, y]); }, addItems(ref, items) { - dispatchCommand(ref, \\"addItems\\", [items]); + Renderer.dispatchCommand(ref, \\"addItems\\", [items]); } }; ", @@ -515,7 +515,7 @@ Map { 'use strict'; -const NativeComponentRegistry = require('react-native/Libraries/NativeComponent/NativeComponentRegistry'); +const {NativeComponentRegistry} = require('react-native'); let nativeComponentName = 'DimensionPropNativeComponent'; export const __INTERNAL_VIEW_CONFIG = { @@ -545,7 +545,7 @@ Map { 'use strict'; -const NativeComponentRegistry = require('react-native/Libraries/NativeComponent/NativeComponentRegistry'); +const {NativeComponentRegistry} = require('react-native'); let nativeComponentName = 'DoublePropNativeComponent'; export const __INTERNAL_VIEW_CONFIG = { @@ -580,8 +580,8 @@ Map { 'use strict'; -const NativeComponentRegistry = require('react-native/Libraries/NativeComponent/NativeComponentRegistry'); -const {ConditionallyIgnoredEventHandlers} = require('react-native/Libraries/NativeComponent/ViewConfigIgnore'); +const {ConditionallyIgnoredEventHandlers} = require('react-native/unstable-internals-do-not-use'); +const {NativeComponentRegistry} = require('react-native'); let nativeComponentName = 'EventsNestedObjectNativeComponent'; export const __INTERNAL_VIEW_CONFIG = { @@ -622,8 +622,8 @@ Map { 'use strict'; -const NativeComponentRegistry = require('react-native/Libraries/NativeComponent/NativeComponentRegistry'); -const {ConditionallyIgnoredEventHandlers} = require('react-native/Libraries/NativeComponent/ViewConfigIgnore'); +const {ConditionallyIgnoredEventHandlers} = require('react-native/unstable-internals-do-not-use'); +const {NativeComponentRegistry} = require('react-native'); let nativeComponentName = 'EventsNativeComponent'; export const __INTERNAL_VIEW_CONFIG = { @@ -692,8 +692,8 @@ Map { 'use strict'; -const NativeComponentRegistry = require('react-native/Libraries/NativeComponent/NativeComponentRegistry'); -const {ConditionallyIgnoredEventHandlers} = require('react-native/Libraries/NativeComponent/ViewConfigIgnore'); +const {ConditionallyIgnoredEventHandlers} = require('react-native/unstable-internals-do-not-use'); +const {NativeComponentRegistry} = require('react-native'); let nativeComponentName = 'RCTInterfaceOnlyComponent'; export const __INTERNAL_VIEW_CONFIG = { @@ -739,7 +739,7 @@ Map { 'use strict'; -const NativeComponentRegistry = require('react-native/Libraries/NativeComponent/NativeComponentRegistry'); +const {NativeComponentRegistry} = require('react-native'); let nativeComponentName = 'ExcludedAndroidComponent'; export const __INTERNAL_VIEW_CONFIG = { @@ -767,7 +767,7 @@ Map { 'use strict'; -const NativeComponentRegistry = require('react-native/Libraries/NativeComponent/NativeComponentRegistry'); +const {NativeComponentRegistry} = require('react-native'); let nativeComponentName = 'ExcludedAndroidIosComponent'; export const __INTERNAL_VIEW_CONFIG = { @@ -795,7 +795,7 @@ Map { 'use strict'; -const NativeComponentRegistry = require('react-native/Libraries/NativeComponent/NativeComponentRegistry'); +const {NativeComponentRegistry} = require('react-native'); let nativeComponentName = 'ExcludedIosComponent'; export const __INTERNAL_VIEW_CONFIG = { @@ -832,7 +832,7 @@ Map { 'use strict'; -const NativeComponentRegistry = require('react-native/Libraries/NativeComponent/NativeComponentRegistry'); +const {NativeComponentRegistry} = require('react-native'); let nativeComponentName = 'FloatPropNativeComponent'; export const __INTERNAL_VIEW_CONFIG = { @@ -867,14 +867,14 @@ Map { 'use strict'; -const NativeComponentRegistry = require('react-native/Libraries/NativeComponent/NativeComponentRegistry'); +const {NativeComponentRegistry} = require('react-native'); let nativeComponentName = 'ImagePropNativeComponent'; export const __INTERNAL_VIEW_CONFIG = { uiViewClassName: \\"ImagePropNativeComponent\\", validAttributes: { thumbImage: { - process: (req => 'default' in req ? req.default : req)(require('react-native/Libraries/Image/resolveAssetSource')) + process: require('react-native').Image.resolveAssetSource } } }; @@ -899,14 +899,14 @@ Map { 'use strict'; -const NativeComponentRegistry = require('react-native/Libraries/NativeComponent/NativeComponentRegistry'); +const {NativeComponentRegistry} = require('react-native'); let nativeComponentName = 'InsetsPropNativeComponent'; export const __INTERNAL_VIEW_CONFIG = { uiViewClassName: \\"InsetsPropNativeComponent\\", validAttributes: { contentInset: { - diff: (req => 'default' in req ? req.default : req)(require('react-native/Libraries/Utilities/differ/insetsDiffer')) + diff: require('react-native/unstable-internals-do-not-use').insetsDiffer } } }; @@ -931,7 +931,7 @@ Map { 'use strict'; -const NativeComponentRegistry = require('react-native/Libraries/NativeComponent/NativeComponentRegistry'); +const {NativeComponentRegistry} = require('react-native'); let nativeComponentName = 'Int32EnumPropsNativeComponent'; export const __INTERNAL_VIEW_CONFIG = { @@ -961,7 +961,7 @@ Map { 'use strict'; -const NativeComponentRegistry = require('react-native/Libraries/NativeComponent/NativeComponentRegistry'); +const {NativeComponentRegistry} = require('react-native'); let nativeComponentName = 'IntegerPropNativeComponent'; export const __INTERNAL_VIEW_CONFIG = { @@ -993,8 +993,8 @@ Map { 'use strict'; -const NativeComponentRegistry = require('react-native/Libraries/NativeComponent/NativeComponentRegistry'); -const {ConditionallyIgnoredEventHandlers} = require('react-native/Libraries/NativeComponent/ViewConfigIgnore'); +const {ConditionallyIgnoredEventHandlers} = require('react-native/unstable-internals-do-not-use'); +const {NativeComponentRegistry} = require('react-native'); let nativeComponentName = 'RCTInterfaceOnlyComponent'; export const __INTERNAL_VIEW_CONFIG = { @@ -1035,7 +1035,7 @@ Map { 'use strict'; -const NativeComponentRegistry = require('react-native/Libraries/NativeComponent/NativeComponentRegistry'); +const {NativeComponentRegistry} = require('react-native'); let nativeComponentName = 'MixedPropNativeComponent'; export const __INTERNAL_VIEW_CONFIG = { @@ -1065,19 +1065,19 @@ Map { 'use strict'; -const NativeComponentRegistry = require('react-native/Libraries/NativeComponent/NativeComponentRegistry'); +const {NativeComponentRegistry} = require('react-native'); let nativeComponentName = 'ImageColorPropNativeComponent'; export const __INTERNAL_VIEW_CONFIG = { uiViewClassName: \\"ImageColorPropNativeComponent\\", validAttributes: { thumbImage: { - process: (req => 'default' in req ? req.default : req)(require('react-native/Libraries/Image/resolveAssetSource')) + process: require('react-native').Image.resolveAssetSource }, - color: require('react-native/Libraries/Components/View/ReactNativeStyleAttributes').colorAttribute, - thumbTintColor: require('react-native/Libraries/Components/View/ReactNativeStyleAttributes').colorAttribute, + color: require('react-native/unstable-internals-do-not-use').colorAttribute, + thumbTintColor: require('react-native/unstable-internals-do-not-use').colorAttribute, point: { - diff: (req => 'default' in req ? req.default : req)(require('react-native/Libraries/Utilities/differ/pointsDiffer')) + diff: require('react-native/unstable-internals-do-not-use').pointsDiffer } } }; @@ -1102,7 +1102,7 @@ Map { 'use strict'; -const NativeComponentRegistry = require('react-native/Libraries/NativeComponent/NativeComponentRegistry'); +const {NativeComponentRegistry} = require('react-native'); let nativeComponentName = 'NoPropsNoEventsComponent'; export const __INTERNAL_VIEW_CONFIG = { @@ -1130,7 +1130,7 @@ Map { 'use strict'; -const NativeComponentRegistry = require('react-native/Libraries/NativeComponent/NativeComponentRegistry'); +const {NativeComponentRegistry} = require('react-native'); let nativeComponentName = 'ObjectProps'; export const __INTERNAL_VIEW_CONFIG = { @@ -1160,7 +1160,7 @@ Map { 'use strict'; -const NativeComponentRegistry = require('react-native/Libraries/NativeComponent/NativeComponentRegistry'); +const {NativeComponentRegistry} = require('react-native'); let nativeComponentName = 'ObjectPropsWithOptionalGen'; export const __INTERNAL_VIEW_CONFIG = { @@ -1190,7 +1190,7 @@ Map { 'use strict'; -const NativeComponentRegistry = require('react-native/Libraries/NativeComponent/NativeComponentRegistry'); +const {NativeComponentRegistry} = require('react-native'); let nativeComponentName = 'ObjectPropsWithOptionalObjectGen'; export const __INTERNAL_VIEW_CONFIG = { @@ -1220,14 +1220,14 @@ Map { 'use strict'; -const NativeComponentRegistry = require('react-native/Libraries/NativeComponent/NativeComponentRegistry'); +const {NativeComponentRegistry} = require('react-native'); let nativeComponentName = 'PointPropNativeComponent'; export const __INTERNAL_VIEW_CONFIG = { uiViewClassName: \\"PointPropNativeComponent\\", validAttributes: { startPoint: { - diff: (req => 'default' in req ? req.default : req)(require('react-native/Libraries/Utilities/differ/pointsDiffer')) + diff: require('react-native/unstable-internals-do-not-use').pointsDiffer } } }; @@ -1252,7 +1252,7 @@ Map { 'use strict'; -const NativeComponentRegistry = require('react-native/Libraries/NativeComponent/NativeComponentRegistry'); +const {NativeComponentRegistry} = require('react-native'); let nativeComponentName = 'StringEnumPropsNativeComponent'; export const __INTERNAL_VIEW_CONFIG = { @@ -1282,7 +1282,7 @@ Map { 'use strict'; -const NativeComponentRegistry = require('react-native/Libraries/NativeComponent/NativeComponentRegistry'); +const {NativeComponentRegistry} = require('react-native'); let nativeComponentName = 'StringPropComponent'; export const __INTERNAL_VIEW_CONFIG = { @@ -1313,7 +1313,7 @@ Map { 'use strict'; -const NativeComponentRegistry = require('react-native/Libraries/NativeComponent/NativeComponentRegistry'); +const {NativeComponentRegistry} = require('react-native'); let nativeComponentName = 'MultiFile1NativeComponent'; export const __INTERNAL_VIEW_CONFIG = { @@ -1352,7 +1352,7 @@ Map { 'use strict'; -const NativeComponentRegistry = require('react-native/Libraries/NativeComponent/NativeComponentRegistry'); +const {NativeComponentRegistry} = require('react-native'); let nativeComponentName = 'MultiComponent1NativeComponent'; export const __INTERNAL_VIEW_CONFIG = { @@ -1391,8 +1391,8 @@ Map { 'use strict'; -const NativeComponentRegistry = require('react-native/Libraries/NativeComponent/NativeComponentRegistry'); -const {UIManager} = require(\\"react-native\\") +const {NativeComponentRegistry} = require('react-native'); +const {UIManager} = require(\\"react-native\\"); let nativeComponentName = 'NativeComponentName'; if (UIManager.hasViewManagerConfig('NativeComponentName')) { diff --git a/packages/react-native-codegen/src/parsers/__tests__/parsers-commons-test.js b/packages/react-native-codegen/src/parsers/__tests__/parsers-commons-test.js index 34d76c575a37..dad048f3be18 100644 --- a/packages/react-native-codegen/src/parsers/__tests__/parsers-commons-test.js +++ b/packages/react-native-codegen/src/parsers/__tests__/parsers-commons-test.js @@ -801,8 +801,7 @@ describe('buildSchema', () => { describe('when there is a TurboModule', () => { const contents = ` - import type {TurboModule} from 'react-native/Libraries/TurboModule/RCTExport'; - import * as TurboModuleRegistry from 'react-native/Libraries/TurboModule/TurboModuleRegistry'; + import {TurboModuleRegistry, type TurboModule} from 'react-native'; export interface Spec extends TurboModule { +getArray: (a: Array) => Array; @@ -1094,8 +1093,7 @@ describe('buildModuleSchema', () => { const [, tryParse] = createParserErrorCapturer(); const language = flowParser.language(); const NATIVE_MODULE = ` - import type {TurboModule} from 'react-native/Libraries/TurboModule/RCTExport'; - import * as TurboModuleRegistry from 'react-native/Libraries/TurboModule/TurboModuleRegistry'; + import {TurboModuleRegistry, type TurboModule} from 'react-native'; export interface Spec extends TurboModule { +getArray: (a: Array) => Array; @@ -1144,8 +1142,7 @@ describe('buildModuleSchema', () => { describe('throwIfMoreThanOneModuleInterfaceParser', () => { it('should throw an error if mulitple module interfaces are found', () => { const contents = ` - import type {TurboModule} from 'react-native/Libraries/TurboModule/RCTExport'; - import * as TurboModuleRegistry from 'react-native/Libraries/TurboModule/TurboModuleRegistry'; + import {TurboModuleRegistry, type TurboModule} from 'react-native'; export interface Spec extends TurboModule { +getBool: (arg: boolean) => boolean; } @@ -1194,8 +1191,7 @@ describe('buildModuleSchema', () => { describe('throwIfModuleInterfaceIsMisnamed', () => { it('should throw an error if module interface is misnamed', () => { const contents = ` - import type {TurboModule} from 'react-native/Libraries/TurboModule/RCTExport'; - import * as TurboModuleRegistry from 'react-native/Libraries/TurboModule/TurboModuleRegistry'; + import {TurboModuleRegistry, type TurboModule} from 'react-native'; export interface MisnamedSpec extends TurboModule { +getArray: (a: Array) => Array; diff --git a/packages/react-native-popup-menu-android/js/PopupMenuAndroid.android.js b/packages/react-native-popup-menu-android/js/PopupMenuAndroid.android.js index 379448c3650e..ceebecbe1b23 100644 --- a/packages/react-native-popup-menu-android/js/PopupMenuAndroid.android.js +++ b/packages/react-native-popup-menu-android/js/PopupMenuAndroid.android.js @@ -9,8 +9,7 @@ */ import type {RefObject} from 'react'; -import type {HostInstance} from 'react-native'; -import type {NativeSyntheticEvent} from 'react-native/Libraries/Types/CoreEventTypes'; +import type {HostInstance, NativeSyntheticEvent} from 'react-native'; import PopupMenuAndroidNativeComponent, { Commands, diff --git a/packages/react-native-popup-menu-android/js/PopupMenuAndroidNativeComponent.android.js b/packages/react-native-popup-menu-android/js/PopupMenuAndroidNativeComponent.android.js index 76eaae6edace..a9bba9b495ad 100644 --- a/packages/react-native-popup-menu-android/js/PopupMenuAndroidNativeComponent.android.js +++ b/packages/react-native-popup-menu-android/js/PopupMenuAndroidNativeComponent.android.js @@ -8,19 +8,13 @@ * @format */ -import type {HostComponent} from 'react-native'; -import type {ViewProps} from 'react-native/Libraries/Components/View/ViewPropTypes'; -import type { - DirectEventHandler, - Int32, -} from 'react-native/Libraries/Types/CodegenTypes'; +import type {CodegenTypes, HostComponent, ViewProps} from 'react-native'; import * as React from 'react'; -import codegenNativeCommands from 'react-native/Libraries/Utilities/codegenNativeCommands'; -import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent'; +import {codegenNativeCommands, codegenNativeComponent} from 'react-native'; type PopupMenuSelectionEvent = Readonly<{ - item: Int32, + item: CodegenTypes.Int32, }>; type PopupMenuDismissEvent = Readonly<{}>; @@ -31,8 +25,8 @@ type NativeProps = Readonly<{ //Props menuItems?: ?ReadonlyArray, - onPopupMenuSelectionChange?: DirectEventHandler, - onPopupMenuDismiss?: DirectEventHandler, + onPopupMenuSelectionChange?: CodegenTypes.DirectEventHandler, + onPopupMenuDismiss?: CodegenTypes.DirectEventHandler, }>; type ComponentType = HostComponent; diff --git a/packages/react-native/src/unstable-internals-do-not-use.d.ts b/packages/react-native/src/unstable-internals-do-not-use.d.ts index 6c1f3bf54c40..6ca8ac9f1a01 100644 --- a/packages/react-native/src/unstable-internals-do-not-use.d.ts +++ b/packages/react-native/src/unstable-internals-do-not-use.d.ts @@ -14,6 +14,8 @@ // ---------------------------------------------------------------------------- import type * as React from 'react'; +import type {ColorValue} from '../types_generated/Libraries/StyleSheet/StyleSheet'; +import type {ProcessedColorValue} from '../types_generated/Libraries/StyleSheet/processColor'; // #region AppContainer @@ -64,6 +66,17 @@ export class AssetSourceResolver { static pickScale(scales: number[], deviceScale?: number): number; } +// #endregion +// #region ConditionallyIgnoredEventHandlers + +/** + * Marks generated event-handler view-config attributes as conditionally + * ignored on platforms that do not synthesize them from native view managers. + */ +export function ConditionallyIgnoredEventHandlers< + T extends Readonly>, +>(value: T): T | undefined; + // #endregion // #region customDirectEventTypes @@ -212,3 +225,41 @@ interface PressabilityDebugViewProps { export const PressabilityDebugView: React.ComponentType; // #endregion +// #region Renderer + +/** Renderer APIs used by generated Codegen modules. */ +export * as Renderer from '../types_generated/Libraries/ReactNative/RendererImplementation'; + +// #endregion +// #region Codegen view config helpers + +export const colorAttribute: + | true + | Readonly<{ + process: typeof import('../types_generated/Libraries/StyleSheet/processColor').default; + }>; + +export function processColorArray( + colors: ReadonlyArray | null | undefined, +): ReadonlyArray | null; + +type Point = { + x: number | null | undefined; + y: number | null | undefined; +}; + +export function pointsDiffer( + one: Point | null | undefined, + two: Point | null | undefined, +): boolean; + +type EdgeInsets = { + top: number | null | undefined; + left: number | null | undefined; + right: number | null | undefined; + bottom: number | null | undefined; +}; + +export function insetsDiffer(one: EdgeInsets, two: EdgeInsets): boolean; + +// #endregion diff --git a/packages/react-native/src/unstable-internals-do-not-use.js b/packages/react-native/src/unstable-internals-do-not-use.js index 96c7b48e1ab0..a83bbb9b9d02 100644 --- a/packages/react-native/src/unstable-internals-do-not-use.js +++ b/packages/react-native/src/unstable-internals-do-not-use.js @@ -40,15 +40,21 @@ // and unstable-internals-do-not-use.js.flow. // ---------------------------------------------------------------------------- +import typeof {colorAttribute} from '../Libraries/Components/View/ReactNativeStyleAttributes'; import typeof getDevServer from '../Libraries/Core/Devtools/getDevServer'; import typeof NativeExceptionsManager from '../Libraries/Core/NativeExceptionsManager'; import typeof AssetSourceResolver from '../Libraries/Image/AssetSourceResolver'; +import typeof {ConditionallyIgnoredEventHandlers} from '../Libraries/NativeComponent/ViewConfigIgnore'; import typeof NativeRedBox from '../Libraries/NativeModules/specs/NativeRedBox'; import typeof NativeSourceCode from '../Libraries/NativeModules/specs/NativeSourceCode'; import typeof {PressabilityDebugView} from '../Libraries/Pressability/PressabilityDebug'; import typeof AppContainer from '../Libraries/ReactNative/AppContainer'; +import typeof * as Renderer from '../Libraries/ReactNative/RendererProxy'; import typeof {customDirectEventTypes} from '../Libraries/Renderer/shims/ReactNativeViewConfigRegistry'; +import typeof processColorArray from '../Libraries/StyleSheet/processColorArray'; import typeof DevLoadingView from '../Libraries/Utilities/DevLoadingView'; +import typeof insetsDiffer from '../Libraries/Utilities/differ/insetsDiffer'; +import typeof pointsDiffer from '../Libraries/Utilities/differ/pointsDiffer'; import typeof HMRClient from '../Libraries/Utilities/HMRClient'; // flowlint unsafe-getters-setters:off @@ -60,6 +66,12 @@ module.exports = { get AssetSourceResolver(): AssetSourceResolver { return require('../Libraries/Image/AssetSourceResolver').default; }, + get ConditionallyIgnoredEventHandlers(): ConditionallyIgnoredEventHandlers<{ + readonly [name: string]: true, + }> { + return require('../Libraries/NativeComponent/ViewConfigIgnore') + .ConditionallyIgnoredEventHandlers; + }, get customDirectEventTypes(): customDirectEventTypes { return require('../Libraries/Renderer/shims/ReactNativeViewConfigRegistry') .customDirectEventTypes; @@ -86,4 +98,22 @@ module.exports = { return require('../Libraries/Pressability/PressabilityDebug') .PressabilityDebugView; }, + // Generated Codegen modules can be emitted outside this package, so they + // cannot use package-relative imports to access these implementations. + get colorAttribute(): colorAttribute { + return require('../Libraries/Components/View/ReactNativeStyleAttributes') + .colorAttribute; + }, + get insetsDiffer(): insetsDiffer { + return require('../Libraries/Utilities/differ/insetsDiffer').default; + }, + get pointsDiffer(): pointsDiffer { + return require('../Libraries/Utilities/differ/pointsDiffer').default; + }, + get processColorArray(): processColorArray { + return require('../Libraries/StyleSheet/processColorArray').default; + }, + get Renderer(): Renderer { + return require('../Libraries/ReactNative/RendererProxy'); + }, }; diff --git a/packages/react-native/src/unstable-internals-do-not-use.js.flow b/packages/react-native/src/unstable-internals-do-not-use.js.flow index b5f6ddec6a15..5e18d997a876 100644 --- a/packages/react-native/src/unstable-internals-do-not-use.js.flow +++ b/packages/react-native/src/unstable-internals-do-not-use.js.flow @@ -16,6 +16,8 @@ export {default as AppContainer} from '../Libraries/ReactNative/AppContainer'; export {default as AssetSourceResolver} from '../Libraries/Image/AssetSourceResolver'; +export {colorAttribute} from '../Libraries/Components/View/ReactNativeStyleAttributes'; +export {ConditionallyIgnoredEventHandlers} from '../Libraries/NativeComponent/ViewConfigIgnore'; export {customDirectEventTypes} from '../Libraries/Renderer/shims/ReactNativeViewConfigRegistry'; export {default as DevLoadingView} from '../Libraries/Utilities/DevLoadingView'; export {default as getDevServer} from '../Libraries/Core/Devtools/getDevServer'; @@ -24,3 +26,7 @@ export {default as NativeExceptionsManager} from '../Libraries/Core/NativeExcept export {default as NativeRedBox} from '../Libraries/NativeModules/specs/NativeRedBox'; export {default as NativeSourceCode} from '../Libraries/NativeModules/specs/NativeSourceCode'; export {PressabilityDebugView} from '../Libraries/Pressability/PressabilityDebug'; +export {default as insetsDiffer} from '../Libraries/Utilities/differ/insetsDiffer'; +export {default as pointsDiffer} from '../Libraries/Utilities/differ/pointsDiffer'; +export {default as processColorArray} from '../Libraries/StyleSheet/processColorArray'; +export * as Renderer from '../Libraries/ReactNative/RendererProxy'; diff --git a/packages/react-native/types_DEPRECATED/Libraries/Types/CodegenTypesNamespace.d.ts b/packages/react-native/types_DEPRECATED/Libraries/Types/CodegenTypesNamespace.d.ts index 1727e69eae2f..79b7b50478d3 100644 --- a/packages/react-native/types_DEPRECATED/Libraries/Types/CodegenTypesNamespace.d.ts +++ b/packages/react-native/types_DEPRECATED/Libraries/Types/CodegenTypesNamespace.d.ts @@ -7,8 +7,7 @@ * @format */ -import type {NativeSyntheticEvent} from 'react-native'; -import type {EventSubscription} from 'react-native/Libraries/vendor/emitter/EventEmitter'; +import type {EventSubscription, NativeSyntheticEvent} from 'react-native'; // Event types // We're not using the PaperName, it is only used to codegen view config settings diff --git a/packages/react-native/types_DEPRECATED/modules/Codegen.d.ts b/packages/react-native/types_DEPRECATED/modules/Codegen.d.ts index 698c922fe6b7..e507d95bf188 100644 --- a/packages/react-native/types_DEPRECATED/modules/Codegen.d.ts +++ b/packages/react-native/types_DEPRECATED/modules/Codegen.d.ts @@ -40,8 +40,7 @@ declare module 'react-native/Libraries/Utilities/codegenNativeComponent' { } declare module 'react-native/Libraries/Types/CodegenTypes' { - import type {NativeSyntheticEvent} from 'react-native'; - import type {EventSubscription} from 'react-native/Libraries/vendor/emitter/EventEmitter'; + import type {EventSubscription, NativeSyntheticEvent} from 'react-native'; // Event types // We're not using the PaperName, it is only used to codegen view config settings diff --git a/private/react-native-codegen-typescript-test/src/__tests__/simple-scenario-frontend-test.ts b/private/react-native-codegen-typescript-test/src/__tests__/simple-scenario-frontend-test.ts index ea2d0f30abb9..4dbfef2d9be4 100644 --- a/private/react-native-codegen-typescript-test/src/__tests__/simple-scenario-frontend-test.ts +++ b/private/react-native-codegen-typescript-test/src/__tests__/simple-scenario-frontend-test.ts @@ -13,8 +13,7 @@ import {TypeScriptParser} from '@react-native/codegen/lib/parsers/typescript/par test(`@rn/codegen should parse an empty TypeScript module`, () => { const tsInput = ` -import type {TurboModule} from 'react-native/Libraries/TurboModule/RCTExport'; -import * as TurboModuleRegistry from 'react-native/Libraries/TurboModule/TurboModuleRegistry'; +import {TurboModuleRegistry, type TurboModule} from 'react-native'; export interface Spec extends TurboModule {} export default TurboModuleRegistry.getEnforcing('SampleTurboModule');