[fix] babel-plugin only rewrites paths for known modules

Don't rewrite import paths for non-existent modules or types. They will
attempt to be imported from the package's main export. This change
currently requires a module map to be generated for the babel-plugin to
use. The map is automatically regenerated for any commit that alters the
entry file of react-native-web.

Fix #822

package.json

@@ -62,6 +62,9 @@
       "fmt:cmd",
       "git update-index --again",
       "eslint"
+    ],
+    "packages/react-native-web/src/index.js": [
+      "node ./scripts/babel/createModuleMap.js"
     ]
   },
   "prettier": {

packages/babel-plugin-react-native-web/src/__tests__/__snapshots__/index-test.js.snap

@@ -41,7 +41,7 @@ import * as ReactNativeModules from 'react-native';
 
 import ReactNative from 'react-native-web/dist/index';
 import View from 'react-native-web/dist/exports/View';
-import Invalid from 'react-native-web/dist/exports/Invalid';
+import { Invalid } from 'react-native-web/dist/index';
 import MyView from 'react-native-web/dist/exports/View';
 import ViewPropTypes from 'react-native-web/dist/exports/ViewPropTypes';
 import * as ReactNativeModules from 'react-native-web/dist/index';

packages/babel-plugin-react-native-web/src/index.js

@@ -1,5 +1,7 @@
+const moduleMap = require('./moduleMap');
+
 const getDistLocation = importName =>
-  importName ? `react-native-web/dist/exports/${importName}` : undefined;
+  importName && moduleMap[importName] ? `react-native-web/dist/exports/${importName}` : undefined;
 
 const isReactNativeRequire = (t, node) => {
   const { declarations } = node;

packages/babel-plugin-react-native-web/src/moduleMap.js

@@ -0,0 +1,61 @@
+// THIS FILE IS AUTOMATICALLY GENERATED. DO NOT EDIT.
+module.exports = {
+  ART: true,
+  ActivityIndicator: true,
+  Animated: true,
+  AppRegistry: true,
+  AppState: true,
+  AsyncStorage: true,
+  BackHandler: true,
+  Button: true,
+  CheckBox: true,
+  Clipboard: true,
+  ColorPropType: true,
+  Dimensions: true,
+  Easing: true,
+  EdgeInsetsPropType: true,
+  FlatList: true,
+  I18nManager: true,
+  Image: true,
+  ImageBackground: true,
+  InteractionManager: true,
+  Keyboard: true,
+  KeyboardAvoidingView: true,
+  Linking: true,
+  ListView: true,
+  Modal: true,
+  NativeModules: true,
+  NetInfo: true,
+  PanResponder: true,
+  Picker: true,
+  PixelRatio: true,
+  Platform: true,
+  PointPropType: true,
+  ProgressBar: true,
+  RefreshControl: true,
+  SafeAreaView: true,
+  ScrollView: true,
+  SectionList: true,
+  Slider: true,
+  StatusBar: true,
+  StyleSheet: true,
+  Switch: true,
+  Text: true,
+  TextInput: true,
+  TextPropTypes: true,
+  Touchable: true,
+  TouchableHighlight: true,
+  TouchableNativeFeedback: true,
+  TouchableOpacity: true,
+  TouchableWithoutFeedback: true,
+  UIManager: true,
+  Vibration: true,
+  View: true,
+  ViewPropTypes: true,
+  VirtualizedList: true,
+  createElement: true,
+  findNodeHandle: true,
+  processColor: true,
+  render: true,
+  unmountComponentAtNode: true
+};

scripts/babel/createModuleMap.js

@@ -0,0 +1,24 @@
+/**
+ * Creates a map of exported modules, allowing the RNW babel plugin to rewrite
+ * paths only for modules it knows are exported by RNW.
+ */
+const fs = require('fs');
+const path = require('path');
+
+const isDirectory = source => fs.lstatSync(source).isDirectory();
+const getDirectories = source =>
+  fs.readdirSync(source).filter(name => isDirectory(path.join(source, name)));
+
+const packagesDir = path.join(__dirname, '../../packages/');
+const exportsDir = path.join(packagesDir, 'react-native-web/src/exports');
+const moduleMapOutfile = path.join(__dirname, 'babel-plugin-react-native-web/src/moduleMap.js');
+
+const moduleMap = getDirectories(exportsDir).reduce((acc, curr) => {
+  acc[curr] = true;
+  return acc;
+}, {});
+
+const data = `// THIS FILE IS AUTOMATICALLY GENERATED. DO NOT EDIT.
+module.exports = ${JSON.stringify(moduleMap, null, 2)}`;
+
+fs.writeFileSync(moduleMapOutfile, data);