Do not explicitly include ".js" in Library imports (#28311)

NickGerleman · facebook-github-bot · commit 161b91049416 · 2020-03-17T02:11:53.000-07:00
Summary: A few recent imports have explicitly added ".js" to the end of their path. This prevents Metro from resolving platform-specific JS files, e.g. "Foo.android.js" or "Foo.windows.js" instead of "Foo.js". React Native Windows provides its own implementation of files in a few cases where stock React Native will share them between Android and iOS. We hope to reduce/eliminate these long term, but requiring explicit ".js" files currently breaks us in a couple of places where we have custom implementations. This change is a quick regex replace of ES6 and CommonJS imports in 'Libraries/" to eliminate ".js". ## Changelog [General] [Fixed] - Do not explicitly include ".js" in Library imports Pull Request resolved: #28311 Test Plan: I haven't done any manual validation of this, but `flow-check` should catch any issues with this during CI. Reviewed By: cpojer Differential Revision: D20486466 Pulled By: TheSavior fbshipit-source-id: 31e1ccc307967417d7d09c34c859f0b2b69eac84
diff --git a/Libraries/Components/Pressable/Pressable.js b/Libraries/Components/Pressable/Pressable.js
@@ -12,18 +12,18 @@
 
 import * as React from 'react';
 import {useMemo, useState, useRef, useImperativeHandle} from 'react';
-import useAndroidRippleForView from './useAndroidRippleForView.js';
+import useAndroidRippleForView from './useAndroidRippleForView';
 import type {
   AccessibilityActionEvent,
   AccessibilityActionInfo,
   AccessibilityRole,
   AccessibilityState,
   AccessibilityValue,
-} from '../View/ViewAccessibility.js';
-import usePressability from '../../Pressability/usePressability.js';
-import {normalizeRect, type RectOrSize} from '../../StyleSheet/Rect.js';
-import type {ColorValue} from '../../StyleSheet/StyleSheetTypes.js';
-import type {LayoutEvent, PressEvent} from '../../Types/CoreEventTypes.js';
+} from '../View/ViewAccessibility';
+import usePressability from '../../Pressability/usePressability';
+import {normalizeRect, type RectOrSize} from '../../StyleSheet/Rect';
+import type {ColorValue} from '../../StyleSheet/StyleSheetTypes';
+import type {LayoutEvent, PressEvent} from '../../Types/CoreEventTypes';
 import View from '../View/View';
 
 type ViewStyleProp = $ElementType<React.ElementConfig<typeof View>, 'style'>;
diff --git a/Libraries/Components/Pressable/useAndroidRippleForView.js b/Libraries/Components/Pressable/useAndroidRippleForView.js
@@ -11,9 +11,9 @@
 'use strict';
 
 import invariant from 'invariant';
-import {Commands} from '../View/ViewNativeComponent.js';
-import type {ColorValue} from '../../StyleSheet/StyleSheetTypes.js';
-import type {PressEvent} from '../../Types/CoreEventTypes.js';
+import {Commands} from '../View/ViewNativeComponent';
+import type {ColorValue} from '../../StyleSheet/StyleSheetTypes';
+import type {PressEvent} from '../../Types/CoreEventTypes';
 import {Platform, View, processColor} from 'react-native';
 import * as React from 'react';
 import {useMemo} from 'react';
diff --git a/Libraries/Components/TextInput/TextInput.js b/Libraries/Components/TextInput/TextInput.js
@@ -45,9 +45,9 @@ if (Platform.OS === 'android') {
   AndroidTextInputCommands = require('./AndroidTextInputNativeComponent')
     .Commands;
 } else if (Platform.OS === 'ios') {
-  RCTMultilineTextInputView = require('./RCTMultilineTextInputNativeComponent.js')
+  RCTMultilineTextInputView = require('./RCTMultilineTextInputNativeComponent')
     .default;
-  RCTSinglelineTextInputView = require('./RCTSingelineTextInputNativeComponent.js')
+  RCTSinglelineTextInputView = require('./RCTSingelineTextInputNativeComponent')
     .default;
 }
 
diff --git a/Libraries/Components/Touchable/TVTouchable.js b/Libraries/Components/Touchable/TVTouchable.js
@@ -11,7 +11,7 @@
 'use strict';
 
 import invariant from 'invariant';
-import ReactNative from '../../Renderer/shims/ReactNative.js';
+import ReactNative from '../../Renderer/shims/ReactNative';
 import type {
   BlurEvent,
   FocusEvent,
diff --git a/Libraries/Components/Touchable/TouchableBounce.js b/Libraries/Components/Touchable/TouchableBounce.js
@@ -12,11 +12,11 @@
 
 import Pressability, {
   type PressabilityConfig,
-} from '../../Pressability/Pressability.js';
-import {PressabilityDebugView} from '../../Pressability/PressabilityDebug.js';
-import type {ViewStyleProp} from '../../StyleSheet/StyleSheet.js';
-import TVTouchable from './TVTouchable.js';
-import typeof TouchableWithoutFeedback from './TouchableWithoutFeedback.js';
+} from '../../Pressability/Pressability';
+import {PressabilityDebugView} from '../../Pressability/PressabilityDebug';
+import type {ViewStyleProp} from '../../StyleSheet/StyleSheet';
+import TVTouchable from './TVTouchable';
+import typeof TouchableWithoutFeedback from './TouchableWithoutFeedback';
 import {Animated, Platform} from 'react-native';
 import * as React from 'react';
 
diff --git a/Libraries/Components/Touchable/TouchableHighlight.js b/Libraries/Components/Touchable/TouchableHighlight.js
@@ -12,12 +12,12 @@
 
 import Pressability, {
   type PressabilityConfig,
-} from '../../Pressability/Pressability.js';
-import {PressabilityDebugView} from '../../Pressability/PressabilityDebug.js';
-import StyleSheet, {type ViewStyleProp} from '../../StyleSheet/StyleSheet.js';
-import type {ColorValue} from '../../StyleSheet/StyleSheetTypes.js';
-import TVTouchable from './TVTouchable.js';
-import typeof TouchableWithoutFeedback from './TouchableWithoutFeedback.js';
+} from '../../Pressability/Pressability';
+import {PressabilityDebugView} from '../../Pressability/PressabilityDebug';
+import StyleSheet, {type ViewStyleProp} from '../../StyleSheet/StyleSheet';
+import type {ColorValue} from '../../StyleSheet/StyleSheetTypes';
+import TVTouchable from './TVTouchable';
+import typeof TouchableWithoutFeedback from './TouchableWithoutFeedback';
 import Platform from '../../Utilities/Platform';
 import View from '../../Components/View/View';
 import * as React from 'react';
diff --git a/Libraries/Components/Touchable/TouchableNativeFeedback.js b/Libraries/Components/Touchable/TouchableNativeFeedback.js
@@ -12,10 +12,10 @@
 
 import Pressability, {
   type PressabilityConfig,
-} from '../../Pressability/Pressability.js';
-import {PressabilityDebugView} from '../../Pressability/PressabilityDebug.js';
-import TVTouchable from './TVTouchable.js';
-import typeof TouchableWithoutFeedback from './TouchableWithoutFeedback.js';
+} from '../../Pressability/Pressability';
+import {PressabilityDebugView} from '../../Pressability/PressabilityDebug';
+import TVTouchable from './TVTouchable';
+import typeof TouchableWithoutFeedback from './TouchableWithoutFeedback';
 import {Commands} from 'react-native/Libraries/Components/View/ViewNativeComponent';
 import ReactNative from 'react-native/Libraries/Renderer/shims/ReactNative';
 import type {PressEvent} from 'react-native/Libraries/Types/CoreEventTypes';
diff --git a/Libraries/Components/Touchable/TouchableOpacity.js b/Libraries/Components/Touchable/TouchableOpacity.js
@@ -12,10 +12,10 @@
 
 import Pressability, {
   type PressabilityConfig,
-} from '../../Pressability/Pressability.js';
-import {PressabilityDebugView} from '../../Pressability/PressabilityDebug.js';
-import TVTouchable from './TVTouchable.js';
-import typeof TouchableWithoutFeedback from './TouchableWithoutFeedback.js';
+} from '../../Pressability/Pressability';
+import {PressabilityDebugView} from '../../Pressability/PressabilityDebug';
+import TVTouchable from './TVTouchable';
+import typeof TouchableWithoutFeedback from './TouchableWithoutFeedback';
 import Animated from 'react-native/Libraries/Animated/src/Animated';
 import Easing from 'react-native/Libraries/Animated/src/Easing';
 import type {ViewStyleProp} from 'react-native/Libraries/StyleSheet/StyleSheet';
diff --git a/Libraries/Components/Touchable/TouchableWithoutFeedback.js b/Libraries/Components/Touchable/TouchableWithoutFeedback.js
@@ -12,9 +12,9 @@
 
 import Pressability, {
   type PressabilityConfig,
-} from '../../Pressability/Pressability.js';
-import {PressabilityDebugView} from '../../Pressability/PressabilityDebug.js';
-import TVTouchable from './TVTouchable.js';
+} from '../../Pressability/Pressability';
+import {PressabilityDebugView} from '../../Pressability/PressabilityDebug';
+import TVTouchable from './TVTouchable';
 import type {
   AccessibilityActionEvent,
   AccessibilityActionInfo,
diff --git a/Libraries/Core/setUpReactDevTools.js b/Libraries/Core/setUpReactDevTools.js
@@ -41,7 +41,7 @@ if (__DEV__) {
       const WebSocket = require('../WebSocket/WebSocket');
       const ws = new WebSocket('ws://' + host + ':' + port);
 
-      const viewConfig = require('../Components/View/ReactNativeViewViewConfig.js');
+      const viewConfig = require('../Components/View/ReactNativeViewViewConfig');
       reactDevTools.connectToDevTools({
         isAppActive,
         resolveRNStyle: require('../StyleSheet/flattenStyle'),
diff --git a/Libraries/Inspector/Inspector.js b/Libraries/Inspector/Inspector.js
@@ -35,7 +35,7 @@ const renderers = findRenderers();
 // Required for React DevTools to view/edit React Native styles in Flipper.
 // Flipper doesn't inject these values when initializing DevTools.
 hook.resolveRNStyle = require('../StyleSheet/flattenStyle');
-const viewConfig = require('../Components/View/ReactNativeViewViewConfig.js');
+const viewConfig = require('../Components/View/ReactNativeViewViewConfig');
 hook.nativeStyleEditorValidAttributes = Object.keys(
   viewConfig.validAttributes.style,
 );
diff --git a/Libraries/Lists/FlatList.js b/Libraries/Lists/FlatList.js
@@ -22,7 +22,7 @@ const invariant = require('invariant');
 import ScrollView, {
   type ScrollResponderType,
 } from '../Components/ScrollView/ScrollView';
-import type {ScrollViewNativeComponentType} from '../Components/ScrollView/ScrollViewNativeComponentType.js';
+import type {ScrollViewNativeComponentType} from '../Components/ScrollView/ScrollViewNativeComponentType';
 import type {ViewStyleProp} from '../StyleSheet/StyleSheet';
 import type {
   ViewToken,
diff --git a/Libraries/Pressability/Pressability.js b/Libraries/Pressability/Pressability.js
@@ -10,16 +10,16 @@
 
 'use strict';
 
-import {isHoverEnabled} from './HoverState.js';
+import {isHoverEnabled} from './HoverState';
 import invariant from 'invariant';
-import SoundManager from '../Components/Sound/SoundManager.js';
-import {normalizeRect, type RectOrSize} from '../StyleSheet/Rect.js';
+import SoundManager from '../Components/Sound/SoundManager';
+import {normalizeRect, type RectOrSize} from '../StyleSheet/Rect';
 import type {
   BlurEvent,
   FocusEvent,
   PressEvent,
   MouseEvent,
-} from '../Types/CoreEventTypes.js';
+} from '../Types/CoreEventTypes';
 import Platform from '../Utilities/Platform';
 import UIManager from '../ReactNative/UIManager';
 import type {HostComponent} from '../Renderer/shims/ReactNativeTypes';
diff --git a/Libraries/Pressability/PressabilityDebug.js b/Libraries/Pressability/PressabilityDebug.js
@@ -10,7 +10,7 @@
 
 'use strict';
 
-import normalizeColor from '../StyleSheet/normalizeColor.js';
+import normalizeColor from '../StyleSheet/normalizeColor';
 import type {ColorValue} from '../StyleSheet/StyleSheetTypes';
 
 import Touchable from '../Components/Touchable/Touchable';
diff --git a/Libraries/Pressability/__tests__/Pressability-test.js b/Libraries/Pressability/__tests__/Pressability-test.js
@@ -11,9 +11,9 @@
 
 'use strict';
 
-import type {PressEvent} from '../../Types/CoreEventTypes.js';
-import * as HoverState from '../HoverState.js';
-import Pressability from '../Pressability.js';
+import type {PressEvent} from '../../Types/CoreEventTypes';
+import * as HoverState from '../HoverState';
+import Pressability from '../Pressability';
 import invariant from 'invariant';
 import nullthrows from 'nullthrows';
 import Platform from '../../Utilities/Platform';
diff --git a/Libraries/Pressability/usePressability.js b/Libraries/Pressability/usePressability.js
@@ -13,7 +13,7 @@
 import Pressability, {
   type EventHandlers,
   type PressabilityConfig,
-} from './Pressability.js';
+} from './Pressability';
 import {useEffect, useRef} from 'react';
 
 export default function usePressability(
diff --git a/Libraries/ReactPrivate/ReactNativePrivateInterface.js b/Libraries/ReactPrivate/ReactNativePrivateInterface.js
@@ -8,7 +8,7 @@
  * @flow strict-local
  */
 
-import typeof BatchedBridge from '../BatchedBridge/BatchedBridge.js';
+import typeof BatchedBridge from '../BatchedBridge/BatchedBridge';
 import typeof ExceptionsManager from '../Core/ExceptionsManager';
 import typeof Platform from '../Utilities/Platform';
 import typeof RCTEventEmitter from '../EventEmitter/RCTEventEmitter';
@@ -23,7 +23,7 @@ import typeof ReactFiberErrorDialog from '../Core/ReactFiberErrorDialog';
 // flowlint unsafe-getters-setters:off
 module.exports = {
   get BatchedBridge(): BatchedBridge {
-    return require('../BatchedBridge/BatchedBridge.js');
+    return require('../BatchedBridge/BatchedBridge');
   },
   get ExceptionsManager(): ExceptionsManager {
     return require('../Core/ExceptionsManager');
diff --git a/Libraries/StyleSheet/EdgeInsetsPropType.js b/Libraries/StyleSheet/EdgeInsetsPropType.js
@@ -10,6 +10,6 @@
 
 'use strict';
 
-import type {Rect} from './Rect.js';
+import type {Rect} from './Rect';
 
 export type EdgeInsetsProp = Rect;
diff --git a/Libraries/vendor/core/ErrorUtils.js b/Libraries/vendor/core/ErrorUtils.js
@@ -8,7 +8,7 @@
  * @flow strict
  */
 
-import type {ErrorUtilsT} from '../../polyfills/error-guard.js';
+import type {ErrorUtilsT} from '../../polyfills/error-guard';
 
 /**
  * The particular require runtime that we are using looks for a global
