refactor: use ESM exports in ReactNativeViewConfigRegistry (#27508)

## 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

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;
-};
+}

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;
-};
+}