From 2349b04d63ed3acb43892b8cb432a16824e05882 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rub=C3=A9n=20Norte?= Date: Thu, 24 Sep 2026 06:41:48 -0700 Subject: [PATCH] Consolidate generated view config imports Summary: Generated view configs currently emit repeated property accesses from React Native entry-point requires and route commands through a renderer namespace. Consolidate imports by source and expose `dispatchCommand` directly from the unstable internals entry point, reducing generated Hermes bytecode while preserving existing stable root exports. Metro's inline-require transform would otherwise expand the consolidated unstable-internals binding back into repeated `require(...)` calls, so keep that dependency non-inlined while leaving other generated imports eligible for lazy loading. Make the unstable `HMRClient` export follow React Native's normal development/production selection so production consumers receive `HMRClientProdShim` instead of including HMR tooling. Changelog: [General][Fixed] - Reduce generated native component bundle overhead Reviewed By: javache Differential Revision: D121383217 --- .../__snapshots__/index-test.js.snap | 24 ++--- .../GenerateViewConfigJs-test.js.snap | 30 +++--- .../GenerateViewConfigJs-test.js.snap | 30 +++--- .../components/GenerateViewConfigJs.js | 99 +++++++++++-------- .../GenerateViewConfigJs-test.js.snap | 58 ++++++----- .../src/unstable-internals-do-not-use.d.ts | 1 + .../src/unstable-internals-do-not-use.js | 9 +- .../src/unstable-internals-do-not-use.js.flow | 1 + 8 files changed, 142 insertions(+), 110 deletions(-) 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 f86c0eaa8a0..e89b1cbac39 100644 --- a/packages/babel-plugin-codegen/__tests__/__snapshots__/index-test.js.snap +++ b/packages/babel-plugin-codegen/__tests__/__snapshots__/index-test.js.snap @@ -99,15 +99,13 @@ interface NativeCommands { +hotspotUpdate: (viewRef: React.ElementRef, x: Int32, y: Int32) => void, +scrollTo: (viewRef: React.ElementRef, y: Int32, animated: boolean) => void, } -const { - ConditionallyIgnoredEventHandlers -} = require('react-native/unstable-internals-do-not-use'); const { NativeComponentRegistry } = require('react-native'); const { - Renderer -} = require(\\"react-native/unstable-internals-do-not-use\\"); + ConditionallyIgnoredEventHandlers, + dispatchCommand +} = require('react-native/unstable-internals-do-not-use'); let nativeComponentName = 'RCTModule'; export const __INTERNAL_VIEW_CONFIG = { uiViewClassName: \\"RCTModule\\", @@ -135,10 +133,10 @@ export const __INTERNAL_VIEW_CONFIG = { export default NativeComponentRegistry.get(nativeComponentName, () => __INTERNAL_VIEW_CONFIG); export const Commands = { hotspotUpdate(ref, x, y) { - Renderer.dispatchCommand(ref, \\"hotspotUpdate\\", [x, y]); + dispatchCommand(ref, \\"hotspotUpdate\\", [x, y]); }, scrollTo(ref, y, animated) { - Renderer.dispatchCommand(ref, \\"scrollTo\\", [y, animated]); + dispatchCommand(ref, \\"scrollTo\\", [y, animated]); } };" `; @@ -164,15 +162,13 @@ interface NativeCommands { +hotspotUpdate: (viewRef: React.ElementRef, x: Int32, y: Int32) => void, +scrollTo: (viewRef: React.ElementRef, y: Int32, animated: boolean) => void, } -const { - ConditionallyIgnoredEventHandlers -} = require('react-native/unstable-internals-do-not-use'); const { NativeComponentRegistry } = require('react-native'); const { - Renderer -} = require(\\"react-native/unstable-internals-do-not-use\\"); + ConditionallyIgnoredEventHandlers, + dispatchCommand +} = require('react-native/unstable-internals-do-not-use'); let nativeComponentName = 'RCTModule'; export const __INTERNAL_VIEW_CONFIG = { uiViewClassName: \\"RCTModule\\", @@ -200,10 +196,10 @@ export const __INTERNAL_VIEW_CONFIG = { export default NativeComponentRegistry.get(nativeComponentName, () => __INTERNAL_VIEW_CONFIG); export const Commands = { hotspotUpdate(ref, x, y) { - Renderer.dispatchCommand(ref, \\"hotspotUpdate\\", [x, y]); + dispatchCommand(ref, \\"hotspotUpdate\\", [x, y]); }, scrollTo(ref, y, animated) { - Renderer.dispatchCommand(ref, \\"scrollTo\\", [y, animated]); + dispatchCommand(ref, \\"scrollTo\\", [y, animated]); } };" `; 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 7eb32dcd4bc..b546853b0f3 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 @@ -17,6 +17,7 @@ Map { 'use strict'; const {NativeComponentRegistry} = require('react-native'); +const {processColorArray} = require('react-native/unstable-internals-do-not-use'); let nativeComponentName = 'ArrayPropsNativeComponentView'; export const __INTERNAL_VIEW_CONFIG = { @@ -27,7 +28,7 @@ export const __INTERNAL_VIEW_CONFIG = { progress: true, radii: true, colors: { - process: require('react-native/unstable-internals-do-not-use').processColorArray + process: processColorArray }, srcs: true, points: true, @@ -92,12 +93,13 @@ Map { 'use strict'; const {NativeComponentRegistry} = require('react-native'); +const {colorAttribute} = require('react-native/unstable-internals-do-not-use'); let nativeComponentName = 'ColorPropNativeComponentView'; export const __INTERNAL_VIEW_CONFIG = { uiViewClassName: \\"ColorPropNativeComponentView\\", validAttributes: { - tintColor: require('react-native/unstable-internals-do-not-use').colorAttribute + tintColor: colorAttribute } }; export default NativeComponentRegistry.get(nativeComponentName, () => __INTERNAL_VIEW_CONFIG); @@ -210,8 +212,8 @@ Map { 'use strict'; -const {ConditionallyIgnoredEventHandlers} = require('react-native/unstable-internals-do-not-use'); const {NativeComponentRegistry} = require('react-native'); +const {ConditionallyIgnoredEventHandlers} = require('react-native/unstable-internals-do-not-use'); let nativeComponentName = 'EventNestedObjectPropsNativeComponentView'; export const __INTERNAL_VIEW_CONFIG = { @@ -252,8 +254,8 @@ Map { 'use strict'; -const {ConditionallyIgnoredEventHandlers} = require('react-native/unstable-internals-do-not-use'); const {NativeComponentRegistry} = require('react-native'); +const {ConditionallyIgnoredEventHandlers} = require('react-native/unstable-internals-do-not-use'); let nativeComponentName = 'EventPropsNativeComponentView'; export const __INTERNAL_VIEW_CONFIG = { @@ -358,14 +360,14 @@ Map { 'use strict'; -const {NativeComponentRegistry} = require('react-native'); +const {Image, NativeComponentRegistry} = require('react-native'); let nativeComponentName = 'ImagePropNativeComponentView'; export const __INTERNAL_VIEW_CONFIG = { uiViewClassName: \\"ImagePropNativeComponentView\\", validAttributes: { thumbImage: { - process: require('react-native').Image.resolveAssetSource + process: Image.resolveAssetSource } } }; @@ -422,8 +424,8 @@ Map { 'use strict'; -const {ConditionallyIgnoredEventHandlers} = require('react-native/unstable-internals-do-not-use'); const {NativeComponentRegistry} = require('react-native'); +const {ConditionallyIgnoredEventHandlers} = require('react-native/unstable-internals-do-not-use'); let nativeComponentName = 'RCTInterfaceOnlyComponent'; export const __INTERNAL_VIEW_CONFIG = { @@ -494,19 +496,20 @@ Map { 'use strict'; -const {NativeComponentRegistry} = require('react-native'); +const {Image, NativeComponentRegistry} = require('react-native'); +const {colorAttribute, pointsDiffer} = require('react-native/unstable-internals-do-not-use'); let nativeComponentName = 'MultiNativePropNativeComponentView'; export const __INTERNAL_VIEW_CONFIG = { uiViewClassName: \\"MultiNativePropNativeComponentView\\", validAttributes: { thumbImage: { - process: require('react-native').Image.resolveAssetSource + process: Image.resolveAssetSource }, - color: require('react-native/unstable-internals-do-not-use').colorAttribute, - thumbTintColor: require('react-native/unstable-internals-do-not-use').colorAttribute, + color: colorAttribute, + thumbTintColor: colorAttribute, point: { - diff: require('react-native/unstable-internals-do-not-use').pointsDiffer + diff: pointsDiffer } } }; @@ -592,13 +595,14 @@ Map { 'use strict'; const {NativeComponentRegistry} = require('react-native'); +const {pointsDiffer} = require('react-native/unstable-internals-do-not-use'); let nativeComponentName = 'PointPropNativeComponentView'; export const __INTERNAL_VIEW_CONFIG = { uiViewClassName: \\"PointPropNativeComponentView\\", validAttributes: { startPoint: { - diff: require('react-native/unstable-internals-do-not-use').pointsDiffer + diff: pointsDiffer } } }; 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 4864828d5d6..0f06599ab2c 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 @@ -17,6 +17,7 @@ Map { 'use strict'; const {NativeComponentRegistry} = require('react-native'); +const {processColorArray} = require('react-native/unstable-internals-do-not-use'); let nativeComponentName = 'ArrayPropsNativeComponentView'; export const __INTERNAL_VIEW_CONFIG = { @@ -27,7 +28,7 @@ export const __INTERNAL_VIEW_CONFIG = { progress: true, radii: true, colors: { - process: require('react-native/unstable-internals-do-not-use').processColorArray + process: processColorArray }, srcs: true, points: true, @@ -92,12 +93,13 @@ Map { 'use strict'; const {NativeComponentRegistry} = require('react-native'); +const {colorAttribute} = require('react-native/unstable-internals-do-not-use'); let nativeComponentName = 'ColorPropNativeComponentView'; export const __INTERNAL_VIEW_CONFIG = { uiViewClassName: \\"ColorPropNativeComponentView\\", validAttributes: { - tintColor: require('react-native/unstable-internals-do-not-use').colorAttribute + tintColor: colorAttribute } }; export default NativeComponentRegistry.get(nativeComponentName, () => __INTERNAL_VIEW_CONFIG); @@ -210,8 +212,8 @@ Map { 'use strict'; -const {ConditionallyIgnoredEventHandlers} = require('react-native/unstable-internals-do-not-use'); const {NativeComponentRegistry} = require('react-native'); +const {ConditionallyIgnoredEventHandlers} = require('react-native/unstable-internals-do-not-use'); let nativeComponentName = 'EventNestedObjectPropsNativeComponentView'; export const __INTERNAL_VIEW_CONFIG = { @@ -252,8 +254,8 @@ Map { 'use strict'; -const {ConditionallyIgnoredEventHandlers} = require('react-native/unstable-internals-do-not-use'); const {NativeComponentRegistry} = require('react-native'); +const {ConditionallyIgnoredEventHandlers} = require('react-native/unstable-internals-do-not-use'); let nativeComponentName = 'EventPropsNativeComponentView'; export const __INTERNAL_VIEW_CONFIG = { @@ -358,14 +360,14 @@ Map { 'use strict'; -const {NativeComponentRegistry} = require('react-native'); +const {Image, NativeComponentRegistry} = require('react-native'); let nativeComponentName = 'ImagePropNativeComponentView'; export const __INTERNAL_VIEW_CONFIG = { uiViewClassName: \\"ImagePropNativeComponentView\\", validAttributes: { thumbImage: { - process: require('react-native').Image.resolveAssetSource + process: Image.resolveAssetSource } } }; @@ -422,8 +424,8 @@ Map { 'use strict'; -const {ConditionallyIgnoredEventHandlers} = require('react-native/unstable-internals-do-not-use'); const {NativeComponentRegistry} = require('react-native'); +const {ConditionallyIgnoredEventHandlers} = require('react-native/unstable-internals-do-not-use'); let nativeComponentName = 'RCTInterfaceOnlyComponent'; export const __INTERNAL_VIEW_CONFIG = { @@ -494,19 +496,20 @@ Map { 'use strict'; -const {NativeComponentRegistry} = require('react-native'); +const {Image, NativeComponentRegistry} = require('react-native'); +const {colorAttribute, pointsDiffer} = require('react-native/unstable-internals-do-not-use'); let nativeComponentName = 'MultiNativePropNativeComponentView'; export const __INTERNAL_VIEW_CONFIG = { uiViewClassName: \\"MultiNativePropNativeComponentView\\", validAttributes: { thumbImage: { - process: require('react-native').Image.resolveAssetSource + process: Image.resolveAssetSource }, - color: require('react-native/unstable-internals-do-not-use').colorAttribute, - thumbTintColor: require('react-native/unstable-internals-do-not-use').colorAttribute, + color: colorAttribute, + thumbTintColor: colorAttribute, point: { - diff: require('react-native/unstable-internals-do-not-use').pointsDiffer + diff: pointsDiffer } } }; @@ -592,13 +595,14 @@ Map { 'use strict'; const {NativeComponentRegistry} = require('react-native'); +const {pointsDiffer} = require('react-native/unstable-internals-do-not-use'); let nativeComponentName = 'PointPropNativeComponentView'; export const __INTERNAL_VIEW_CONFIG = { uiViewClassName: \\"PointPropNativeComponentView\\", validAttributes: { startPoint: { - diff: require('react-native/unstable-internals-do-not-use').pointsDiffer + diff: pointsDiffer } } }; diff --git a/packages/react-native-codegen/src/generators/components/GenerateViewConfigJs.js b/packages/react-native-codegen/src/generators/components/GenerateViewConfigJs.js index d9e4de50bf9..339f7e3b6e2 100644 --- a/packages/react-native-codegen/src/generators/components/GenerateViewConfigJs.js +++ b/packages/react-native-codegen/src/generators/components/GenerateViewConfigJs.js @@ -53,17 +53,23 @@ ${imports} ${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 RENDERER_IMPORT = - 'const {Renderer} = require("react-native/unstable-internals-do-not-use");'; +function buildImport(source: string, imports: Set): string { + if (imports.size === 0) { + return ''; + } + + return `const {${Array.from(imports).sort().join(', ')}} = require('${source}');`; +} function expression(input: string) { return core.template.expression(input)(); } -function getReactDiffProcessValue(typeAnnotation: PropTypeAnnotation) { +function getReactDiffProcessValue( + typeAnnotation: PropTypeAnnotation, + unstableImports: Set, + reactNativeImports: Set, +) { switch (typeAnnotation.type) { case 'BooleanTypeAnnotation': case 'StringTypeAnnotation': @@ -78,23 +84,19 @@ function getReactDiffProcessValue(typeAnnotation: PropTypeAnnotation) { case 'ReservedPropTypeAnnotation': switch (typeAnnotation.name) { case 'ColorPrimitive': - return expression( - "require('react-native/unstable-internals-do-not-use').colorAttribute", - ); + unstableImports.add('colorAttribute'); + return expression('colorAttribute'); case 'ImageSourcePrimitive': - return expression( - "{ process: require('react-native').Image.resolveAssetSource }", - ); + reactNativeImports.add('Image'); + return expression('{process: Image.resolveAssetSource}'); case 'ImageRequestPrimitive': throw new Error('ImageRequest should not be used in props'); case 'PointPrimitive': - return expression( - "{ diff: require('react-native/unstable-internals-do-not-use').pointsDiffer }", - ); + unstableImports.add('pointsDiffer'); + return expression('{diff: pointsDiffer}'); case 'EdgeInsetsPrimitive': - return expression( - "{ diff: require('react-native/unstable-internals-do-not-use').insetsDiffer }", - ); + unstableImports.add('insetsDiffer'); + return expression('{diff: insetsDiffer}'); case 'DimensionPrimitive': return t.booleanLiteral(true); default: @@ -107,9 +109,8 @@ function getReactDiffProcessValue(typeAnnotation: PropTypeAnnotation) { if (typeAnnotation.elementType.type === 'ReservedPropTypeAnnotation') { switch (typeAnnotation.elementType.name) { case 'ColorPrimitive': - return expression( - "{ process: require('react-native/unstable-internals-do-not-use').processColorArray }", - ); + unstableImports.add('processColorArray'); + return expression('{process: processColorArray}'); case 'ImageSourcePrimitive': case 'PointPrimitive': case 'EdgeInsetsPrimitive': @@ -192,13 +193,11 @@ function normalizeInputEventName(name: string) { // Replicates the behavior of viewConfig in RCTComponentData.m function getValidAttributesForEvents( events: ReadonlyArray, - imports: Set, + unstableImports: 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/unstable-internals-do-not-use');", - ); + unstableImports.add('ConditionallyIgnoredEventHandlers'); const validAttributes = t.objectExpression( events.map(eventType => { @@ -257,7 +256,8 @@ function buildViewConfig( schema: SchemaType, componentName: string, component: ComponentShape, - imports: Set, + unstableImports: Set, + reactNativeImports: Set, ) { const componentProps = component.props; const componentEvents = component.events; @@ -267,10 +267,6 @@ function buildViewConfig( case 'ReactNativeBuiltInType': switch (extendProps.knownTypeName) { case 'ReactNativeCoreViewProps': - imports.add( - "const {NativeComponentRegistry} = require('react-native');", - ); - return; default: extendProps.knownTypeName as empty; @@ -286,11 +282,19 @@ function buildViewConfig( ...componentProps.map(schemaProp => { return t.objectProperty( t.identifier(schemaProp.name), - getReactDiffProcessValue(schemaProp.typeAnnotation), + getReactDiffProcessValue( + schemaProp.typeAnnotation, + unstableImports, + reactNativeImports, + ), ); }), ...(componentEvents.length > 0 - ? [t.spreadElement(getValidAttributesForEvents(componentEvents, imports))] + ? [ + t.spreadElement( + getValidAttributesForEvents(componentEvents, unstableImports), + ), + ] : []), ]); @@ -362,7 +366,7 @@ function buildCommands( schema: SchemaType, componentName: string, component: ComponentShape, - imports: Set, + unstableImports: Set, ) { const commands = component.commands; @@ -370,7 +374,7 @@ function buildCommands( return null; } - imports.add(RENDERER_IMPORT); + unstableImports.add('dispatchCommand'); const commandsObject = t.objectExpression( commands.map(command => { @@ -378,10 +382,7 @@ function buildCommands( const params = command.typeAnnotation.params; const dispatchCommandCall = t.callExpression( - t.memberExpression( - t.identifier('Renderer'), - t.identifier('dispatchCommand'), - ), + t.identifier('dispatchCommand'), [ t.identifier('ref'), t.stringLiteral(commandName), @@ -409,7 +410,8 @@ module.exports = { generate(libraryName: string, schema: SchemaType): FilesOutput { try { const fileName = `${libraryName}NativeViewConfig.js`; - const imports: Set = new Set(); + const unstableImports: Set = new Set(); + const reactNativeImports: Set = new Set(); const moduleResults = Object.keys(schema.modules) .map(moduleName => { @@ -425,9 +427,11 @@ module.exports = { const component = components[componentName]; if (component.paperComponentNameDeprecated) { - imports.add(UIMANAGER_IMPORT); + reactNativeImports.add('UIManager'); } + reactNativeImports.add('NativeComponentRegistry'); + const replacedTemplate = ComponentTemplate({ componentName, paperComponentName: component.paperComponentName, @@ -445,7 +449,8 @@ module.exports = { schema, paperComponentName, component, - imports, + unstableImports, + reactNativeImports, ), }); @@ -453,7 +458,7 @@ module.exports = { schema, paperComponentName, component, - imports, + unstableImports, ); if (commandsExport) { replacedSourceRoot.body.push(commandsExport); @@ -477,7 +482,15 @@ module.exports = { const replacedTemplate = FileTemplate({ componentConfig: moduleResults, - imports: Array.from(imports).sort().join('\n'), + imports: [ + buildImport('react-native', reactNativeImports), + buildImport( + 'react-native/unstable-internals-do-not-use', + unstableImports, + ), + ] + .filter(Boolean) + .join('\n'), }); return new Map([[fileName, replacedTemplate]]); 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 2e366a12f55..74b0b470878 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 @@ -155,6 +155,7 @@ Map { 'use strict'; const {NativeComponentRegistry} = require('react-native'); +const {processColorArray} = require('react-native/unstable-internals-do-not-use'); let nativeComponentName = 'ArrayPropsNativeComponent'; export const __INTERNAL_VIEW_CONFIG = { @@ -165,7 +166,7 @@ export const __INTERNAL_VIEW_CONFIG = { progress: true, radii: true, colors: { - process: require('react-native/unstable-internals-do-not-use').processColorArray + process: processColorArray }, srcs: true, points: true, @@ -289,6 +290,7 @@ Map { 'use strict'; const {NativeComponentRegistry} = require('react-native'); +const {processColorArray} = require('react-native/unstable-internals-do-not-use'); let nativeComponentName = 'ArrayPropsWithOptionalGenNativeComponent'; export const __INTERNAL_VIEW_CONFIG = { @@ -299,7 +301,7 @@ export const __INTERNAL_VIEW_CONFIG = { progress: true, radii: true, colors: { - process: require('react-native/unstable-internals-do-not-use').processColorArray + process: processColorArray }, srcs: true, points: true, @@ -333,6 +335,7 @@ Map { 'use strict'; const {NativeComponentRegistry} = require('react-native'); +const {processColorArray} = require('react-native/unstable-internals-do-not-use'); let nativeComponentName = 'ArrayPropsWithOptionalObjectGenNativeComponent'; export const __INTERNAL_VIEW_CONFIG = { @@ -343,7 +346,7 @@ export const __INTERNAL_VIEW_CONFIG = { progress: true, radii: true, colors: { - process: require('react-native/unstable-internals-do-not-use').processColorArray + process: processColorArray }, srcs: true, points: true, @@ -407,12 +410,13 @@ Map { 'use strict'; const {NativeComponentRegistry} = require('react-native'); +const {colorAttribute} = require('react-native/unstable-internals-do-not-use'); let nativeComponentName = 'ColorPropNativeComponent'; export const __INTERNAL_VIEW_CONFIG = { uiViewClassName: \\"ColorPropNativeComponent\\", validAttributes: { - tintColor: require('react-native/unstable-internals-do-not-use').colorAttribute + tintColor: colorAttribute } }; export default NativeComponentRegistry.get(nativeComponentName, () => __INTERNAL_VIEW_CONFIG); @@ -437,7 +441,7 @@ Map { 'use strict'; const {NativeComponentRegistry} = require('react-native'); -const {Renderer} = require(\\"react-native/unstable-internals-do-not-use\\"); +const {dispatchCommand} = require('react-native/unstable-internals-do-not-use'); let nativeComponentName = 'CommandNativeComponent'; export const __INTERNAL_VIEW_CONFIG = { @@ -447,10 +451,10 @@ export const __INTERNAL_VIEW_CONFIG = { export default NativeComponentRegistry.get(nativeComponentName, () => __INTERNAL_VIEW_CONFIG); export const Commands = { flashScrollIndicators(ref) { - Renderer.dispatchCommand(ref, \\"flashScrollIndicators\\", []); + dispatchCommand(ref, \\"flashScrollIndicators\\", []); }, allTypes(ref, x, y, z, message, animated, locations) { - Renderer.dispatchCommand(ref, \\"allTypes\\", [x, y, z, message, animated, locations]); + dispatchCommand(ref, \\"allTypes\\", [x, y, z, message, animated, locations]); } }; ", @@ -474,7 +478,7 @@ Map { 'use strict'; const {NativeComponentRegistry} = require('react-native'); -const {Renderer} = require(\\"react-native/unstable-internals-do-not-use\\"); +const {dispatchCommand} = require('react-native/unstable-internals-do-not-use'); let nativeComponentName = 'CommandNativeComponent'; export const __INTERNAL_VIEW_CONFIG = { @@ -486,13 +490,13 @@ export const __INTERNAL_VIEW_CONFIG = { export default NativeComponentRegistry.get(nativeComponentName, () => __INTERNAL_VIEW_CONFIG); export const Commands = { handleRootTag(ref, rootTag) { - Renderer.dispatchCommand(ref, \\"handleRootTag\\", [rootTag]); + dispatchCommand(ref, \\"handleRootTag\\", [rootTag]); }, hotspotUpdate(ref, x, y) { - Renderer.dispatchCommand(ref, \\"hotspotUpdate\\", [x, y]); + dispatchCommand(ref, \\"hotspotUpdate\\", [x, y]); }, addItems(ref, items) { - Renderer.dispatchCommand(ref, \\"addItems\\", [items]); + dispatchCommand(ref, \\"addItems\\", [items]); } }; ", @@ -580,8 +584,8 @@ Map { 'use strict'; -const {ConditionallyIgnoredEventHandlers} = require('react-native/unstable-internals-do-not-use'); const {NativeComponentRegistry} = require('react-native'); +const {ConditionallyIgnoredEventHandlers} = require('react-native/unstable-internals-do-not-use'); let nativeComponentName = 'EventsNestedObjectNativeComponent'; export const __INTERNAL_VIEW_CONFIG = { @@ -622,8 +626,8 @@ Map { 'use strict'; -const {ConditionallyIgnoredEventHandlers} = require('react-native/unstable-internals-do-not-use'); const {NativeComponentRegistry} = require('react-native'); +const {ConditionallyIgnoredEventHandlers} = require('react-native/unstable-internals-do-not-use'); let nativeComponentName = 'EventsNativeComponent'; export const __INTERNAL_VIEW_CONFIG = { @@ -692,8 +696,8 @@ Map { 'use strict'; -const {ConditionallyIgnoredEventHandlers} = require('react-native/unstable-internals-do-not-use'); const {NativeComponentRegistry} = require('react-native'); +const {ConditionallyIgnoredEventHandlers} = require('react-native/unstable-internals-do-not-use'); let nativeComponentName = 'RCTInterfaceOnlyComponent'; export const __INTERNAL_VIEW_CONFIG = { @@ -867,14 +871,14 @@ Map { 'use strict'; -const {NativeComponentRegistry} = require('react-native'); +const {Image, NativeComponentRegistry} = require('react-native'); let nativeComponentName = 'ImagePropNativeComponent'; export const __INTERNAL_VIEW_CONFIG = { uiViewClassName: \\"ImagePropNativeComponent\\", validAttributes: { thumbImage: { - process: require('react-native').Image.resolveAssetSource + process: Image.resolveAssetSource } } }; @@ -900,13 +904,14 @@ Map { 'use strict'; const {NativeComponentRegistry} = require('react-native'); +const {insetsDiffer} = require('react-native/unstable-internals-do-not-use'); let nativeComponentName = 'InsetsPropNativeComponent'; export const __INTERNAL_VIEW_CONFIG = { uiViewClassName: \\"InsetsPropNativeComponent\\", validAttributes: { contentInset: { - diff: require('react-native/unstable-internals-do-not-use').insetsDiffer + diff: insetsDiffer } } }; @@ -993,8 +998,8 @@ Map { 'use strict'; -const {ConditionallyIgnoredEventHandlers} = require('react-native/unstable-internals-do-not-use'); const {NativeComponentRegistry} = require('react-native'); +const {ConditionallyIgnoredEventHandlers} = require('react-native/unstable-internals-do-not-use'); let nativeComponentName = 'RCTInterfaceOnlyComponent'; export const __INTERNAL_VIEW_CONFIG = { @@ -1065,19 +1070,20 @@ Map { 'use strict'; -const {NativeComponentRegistry} = require('react-native'); +const {Image, NativeComponentRegistry} = require('react-native'); +const {colorAttribute, pointsDiffer} = require('react-native/unstable-internals-do-not-use'); let nativeComponentName = 'ImageColorPropNativeComponent'; export const __INTERNAL_VIEW_CONFIG = { uiViewClassName: \\"ImageColorPropNativeComponent\\", validAttributes: { thumbImage: { - process: require('react-native').Image.resolveAssetSource + process: Image.resolveAssetSource }, - color: require('react-native/unstable-internals-do-not-use').colorAttribute, - thumbTintColor: require('react-native/unstable-internals-do-not-use').colorAttribute, + color: colorAttribute, + thumbTintColor: colorAttribute, point: { - diff: require('react-native/unstable-internals-do-not-use').pointsDiffer + diff: pointsDiffer } } }; @@ -1221,13 +1227,14 @@ Map { 'use strict'; const {NativeComponentRegistry} = require('react-native'); +const {pointsDiffer} = require('react-native/unstable-internals-do-not-use'); let nativeComponentName = 'PointPropNativeComponent'; export const __INTERNAL_VIEW_CONFIG = { uiViewClassName: \\"PointPropNativeComponent\\", validAttributes: { startPoint: { - diff: require('react-native/unstable-internals-do-not-use').pointsDiffer + diff: pointsDiffer } } }; @@ -1391,8 +1398,7 @@ Map { 'use strict'; -const {NativeComponentRegistry} = require('react-native'); -const {UIManager} = require(\\"react-native\\"); +const {NativeComponentRegistry, UIManager} = require('react-native'); let nativeComponentName = 'NativeComponentName'; if (UIManager.hasViewManagerConfig('NativeComponentName')) { 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 6ca8ac9f1a0..9d0b49d02b9 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 @@ -229,6 +229,7 @@ export const PressabilityDebugView: React.ComponentType