chore: configure Metro to consume source directly (react-native-webvi…

…ew#2395)

This will allow developers to modify the TypeScript code and see changes
without having to run `tsc --watch` separately.

metro.config.js

@@ -42,6 +42,7 @@ module.exports = {
   projectRoot: path.join(__dirname, 'example'),
   watchFolders: [__dirname],
   resolver: {
+    resolverMainFields: ['main-internal', 'browser', 'main'],
     blacklistRE: blockList,
     blockList,
   },

package.json

@@ -2,6 +2,7 @@
   "name": "react-native-webview",
   "description": "React Native WebView component for iOS, Android, macOS, and Windows",
   "main": "index.js",
+  "main-internal": "src/index.ts",
   "typings": "index.d.ts",
   "author": "Jamon Holmgren <jamon@infinite.red>",
   "contributors": [

src/WebView.android.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 
 import {
   Image,
-  requireNativeComponent,
   UIManager as NotTypedUIManager,
   View,
   NativeModules,
@@ -14,6 +13,7 @@ import BatchedBridge from 'react-native/Libraries/BatchedBridge/BatchedBridge';
 
 import invariant from 'invariant';
 
+import RNCWebView from "./WebViewNativeComponent.android";
 import {
   defaultOriginWhitelist,
   createOnShouldStartLoadWithRequest,
@@ -37,9 +37,6 @@ import styles from './WebView.styles';
 
 const UIManager = NotTypedUIManager as RNCWebViewUIManagerAndroid;
 
-const RNCWebView = requireNativeComponent(
-  'RNCWebView',
-) as typeof NativeWebViewAndroid;
 const { resolveAssetSource } = Image;
 
 /**

src/WebView.ios.tsx

@@ -2,14 +2,14 @@ import React from 'react';
 import {
   UIManager as NotTypedUIManager,
   View,
-  requireNativeComponent,
   NativeModules,
   Image,
   findNodeHandle,
   ImageSourcePropType,
 } from 'react-native';
 import invariant from 'invariant';
 
+import RNCWebView from "./WebViewNativeComponent.ios";
 import {
   defaultOriginWhitelist,
   createOnShouldStartLoadWithRequest,
@@ -50,10 +50,6 @@ const processDecelerationRate = (
 
 const RNCWebViewManager = NativeModules.RNCWebViewManager as ViewManager;
 
-const RNCWebView: typeof NativeWebViewIOS = requireNativeComponent(
-  'RNCWebView',
-);
-
 class WebView extends React.Component<IOSWebViewProps, State> {
   static defaultProps = {
     javaScriptEnabled: true,
@@ -202,7 +198,7 @@ class WebView extends React.Component<IOSWebViewProps, State> {
     } else {
       console.warn('Encountered an error loading page', event.nativeEvent);
     }
-    
+
     if (onLoadEnd) {
       onLoadEnd(event);
     }

src/WebView.macos.tsx

@@ -2,14 +2,14 @@ import React from 'react';
 import {
   UIManager as NotTypedUIManager,
   View,
-  requireNativeComponent,
   NativeModules,
   Image,
   findNodeHandle,
   ImageSourcePropType,
 } from 'react-native';
 import invariant from 'invariant';
 
+import RNCWebView from "./WebViewNativeComponent.ios";
 import {
   defaultOriginWhitelist,
   createOnShouldStartLoadWithRequest,
@@ -38,10 +38,6 @@ const { resolveAssetSource } = Image;
 
 const RNCWebViewManager = NativeModules.RNCWebViewManager as ViewManager;
 
-const RNCWebView: typeof NativeWebViewMacOS = requireNativeComponent(
-  'RNCWebView',
-);
-
 class WebView extends React.Component<MacOSWebViewProps, State> {
   static defaultProps = {
     javaScriptEnabled: true,
@@ -189,7 +185,7 @@ class WebView extends React.Component<MacOSWebViewProps, State> {
     } else {
       console.warn('Encountered an error loading page', event.nativeEvent);
     }
-    
+
     if (onLoadEnd) {
       onLoadEnd(event);
     }

src/WebView.windows.tsx

@@ -14,15 +14,13 @@ import React from 'react';
 import {
   UIManager as NotTypedUIManager,
   View,
-  requireNativeComponent,
   StyleSheet,
   Image,
   ImageSourcePropType,
   findNodeHandle,
 } from 'react-native';
-import {
-  createOnShouldStartLoadWithRequest,
-} from './WebViewShared';
+import RCTWebView from "./WebViewNativeComponent.windows";
+import { createOnShouldStartLoadWithRequest } from './WebViewShared';
 import {
   NativeWebViewWindows,
   WebViewSharedProps,
@@ -37,9 +35,6 @@ import {
 
 const UIManager = NotTypedUIManager as RNCWebViewUIManagerWindows;
 const { resolveAssetSource } = Image;
-const RCTWebView: typeof NativeWebViewWindows = requireNativeComponent(
-  'RCTWebView',
-);
 
 const styles = StyleSheet.create({
   container: {
@@ -104,7 +99,7 @@ export default class WebView extends React.Component<WebViewSharedProps, State>
     );
   }
 
-  postMessage = (data: string) => {    
+  postMessage = (data: string) => {
     const message = this.getInjectableJSMessage(data);
     UIManager.dispatchViewManagerCommand(
       this.getWebViewHandle(),

src/WebViewNativeComponent.android.ts

@@ -0,0 +1,8 @@
+import { requireNativeComponent } from "react-native";
+import type { NativeWebViewAndroid } from "./WebViewTypes";
+
+const RNCWebView: typeof NativeWebViewAndroid = requireNativeComponent(
+  'RNCWebView',
+);
+
+export default RNCWebView;

src/WebViewNativeComponent.ios.ts

@@ -0,0 +1,8 @@
+import { requireNativeComponent } from "react-native";
+import type { NativeWebViewIOS } from "./WebViewTypes";
+
+const RNCWebView: typeof NativeWebViewIOS = requireNativeComponent(
+  'RNCWebView',
+);
+
+export default RNCWebView;

src/WebViewNativeComponent.macos.ts

@@ -0,0 +1,8 @@
+import { requireNativeComponent } from "react-native";
+import type { NativeWebViewMacOS } from "./WebViewTypes";
+
+const RNCWebView: typeof NativeWebViewMacOS = requireNativeComponent(
+  'RNCWebView',
+);
+
+export default RNCWebView;

src/WebViewNativeComponent.windows.ts

@@ -0,0 +1,8 @@
+import { requireNativeComponent } from "react-native";
+import type { NativeWebViewWindows } from "./WebViewTypes";
+
+const RCTWebView: typeof NativeWebViewWindows = requireNativeComponent(
+  'RCTWebView',
+);
+
+export default RCTWebView;

src/index.ts

@@ -0,0 +1,4 @@
+import WebView from './WebView';
+
+export { WebView };
+export default WebView;