refactor: use ESM exports in ReactNativeViewConfigRegistry (#27508)

jbroma · web-flow · commit ea8a8619ce51 · 2023-10-12T17:28:32.000+01:00
## Summary When transpiling `react-native` with `swc` this file caused some trouble as it mixes ESM and CJS import/export syntax. This PR addresses this by converting CJS exports to ESM exports. As `ReactNativeViewConfigRegistry` is synced from `react` to `react-native` repository, it's required to make the change here. I've also aligned the mock of `ReactNativeViewConfigRegistry` to reflect current implementation. Related PR in `react-native`: facebook/react-native#40787
diff --git a/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/ReactNativeViewConfigRegistry.js b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/ReactNativeViewConfigRegistry.js
@@ -9,26 +9,16 @@
 
 'use strict';
 
-import type {
-  ReactNativeBaseComponentViewConfig,
-  ViewConfigGetter,
-} from './ReactNativeTypes';
+import {type ViewConfig} from './ReactNativeTypes';
 
 // Event configs
-const customBubblingEventTypes = {};
-const customDirectEventTypes = {};
-const eventTypes = {};
-
-exports.customBubblingEventTypes = customBubblingEventTypes;
-exports.customDirectEventTypes = customDirectEventTypes;
-exports.eventTypes = eventTypes;
+export const customBubblingEventTypes = {};
+export const customDirectEventTypes = {};
 
 const viewConfigCallbacks = new Map();
 const viewConfigs = new Map();
 
-function processEventTypes(
-  viewConfig: ReactNativeBaseComponentViewConfig<>,
-): void {
+function processEventTypes(viewConfig: ViewConfig): void {
   const {bubblingEventTypes, directEventTypes} = viewConfig;
 
   if (__DEV__) {
@@ -46,7 +36,7 @@ function processEventTypes(
   if (bubblingEventTypes != null) {
     for (const topLevelType in bubblingEventTypes) {
       if (customBubblingEventTypes[topLevelType] == null) {
-        eventTypes[topLevelType] = customBubblingEventTypes[topLevelType] =
+        customBubblingEventTypes[topLevelType] =
           bubblingEventTypes[topLevelType];
       }
     }
@@ -55,8 +45,7 @@ function processEventTypes(
   if (directEventTypes != null) {
     for (const topLevelType in directEventTypes) {
       if (customDirectEventTypes[topLevelType] == null) {
-        eventTypes[topLevelType] = customDirectEventTypes[topLevelType] =
-          directEventTypes[topLevelType];
+        customDirectEventTypes[topLevelType] = directEventTypes[topLevelType];
       }
     }
   }
@@ -66,9 +55,8 @@ function processEventTypes(
  * Registers a native view/component by name.
  * A callback is provided to load the view config from UIManager.
  * The callback is deferred until the view is actually rendered.
- * This is done to avoid causing Prepack deopts.
  */
-exports.register = function (name: string, callback: ViewConfigGetter): string {
+export function register(name: string, callback: () => ViewConfig): string {
   if (viewConfigCallbacks.has(name)) {
     throw new Error(`Tried to register two views with the same name ${name}`);
   }
@@ -83,14 +71,14 @@ exports.register = function (name: string, callback: ViewConfigGetter): string {
 
   viewConfigCallbacks.set(name, callback);
   return name;
-};
+}
 
 /**
  * Retrieves a config for the specified view.
  * If this is the first time the view has been used,
  * This configuration will be lazy-loaded from UIManager.
  */
-exports.get = function (name: string): ReactNativeBaseComponentViewConfig<> {
+export function get(name: string): ViewConfig {
   let viewConfig;
   if (!viewConfigs.has(name)) {
     const callback = viewConfigCallbacks.get(name);
@@ -121,4 +109,4 @@ exports.get = function (name: string): ReactNativeBaseComponentViewConfig<> {
   }
 
   return viewConfig;
-};
+}
diff --git a/scripts/rollup/shims/react-native/ReactNativeViewConfigRegistry.js b/scripts/rollup/shims/react-native/ReactNativeViewConfigRegistry.js
@@ -14,7 +14,7 @@ import {type ViewConfig} from './ReactNativeTypes';
 import invariant from 'invariant';
 
 // Event configs
-const customBubblingEventTypes: {
+export const customBubblingEventTypes: {
   [eventName: string]: $ReadOnly<{
     phasedRegistrationNames: $ReadOnly<{
       captured: string,
@@ -24,16 +24,13 @@ const customBubblingEventTypes: {
   }>,
   ...
 } = {};
-const customDirectEventTypes: {
+export const customDirectEventTypes: {
   [eventName: string]: $ReadOnly<{
     registrationName: string,
   }>,
   ...
 } = {};
 
-exports.customBubblingEventTypes = customBubblingEventTypes;
-exports.customDirectEventTypes = customDirectEventTypes;
-
 const viewConfigCallbacks = new Map<string, ?() => ViewConfig>();
 const viewConfigs = new Map<string, ViewConfig>();
 
@@ -75,7 +72,7 @@ function processEventTypes(viewConfig: ViewConfig): void {
  * A callback is provided to load the view config from UIManager.
  * The callback is deferred until the view is actually rendered.
  */
-exports.register = function (name: string, callback: () => ViewConfig): string {
+export function register(name: string, callback: () => ViewConfig): string {
   invariant(
     !viewConfigCallbacks.has(name),
     'Tried to register two views with the same name %s',
@@ -89,14 +86,14 @@ exports.register = function (name: string, callback: () => ViewConfig): string {
   );
   viewConfigCallbacks.set(name, callback);
   return name;
-};
+}
 
 /**
  * Retrieves a config for the specified view.
  * If this is the first time the view has been used,
  * This configuration will be lazy-loaded from UIManager.
  */
-exports.get = function (name: string): ViewConfig {
+export function get(name: string): ViewConfig {
   let viewConfig;
   if (!viewConfigs.has(name)) {
     const callback = viewConfigCallbacks.get(name);
@@ -124,4 +121,4 @@ exports.get = function (name: string): ViewConfig {
   }
   invariant(viewConfig, 'View config not found for name %s', name);
   return viewConfig;
-};
+}
