Remove JSX code from main runtime.js file (#651)

This PR fixes an issue we detected in some app configurations
(specifically in react conf app). We identified the issue to be rooted
in the fact we've been using JSX syntax in the main runtime.js file. The
runtime is one of the first files included in the bundler. Using JSX
there was making it import react internals, which impacted the order of
the modules being loaded. Apparently, some applications are sensitive to
this order, and the runtime shouldn't impact it.

The fix was to move JSX code inside of wrapper.js that is loaded lazily
and hence doesn't impact the order of modules being processed when
bundle is loaded.

### How Has This Been Tested: 
1. Run react-conf-app example (should successfully start)
2. Add `setWrapperComponentProvider` call to one of the other test apps
to make sure the fix from #616 is still working

packages/vscode-extension/lib/runtime.js

@@ -47,7 +47,7 @@ global.__RNIDE_register_navigation_plugin = function (name, plugin) {
 };
 
 AppRegistry.setWrapperComponentProvider((appParameters) => {
-  return require("__RNIDE_lib__/wrapper.js").PreviewAppWrapper;
+  return require("__RNIDE_lib__/wrapper.js").AppWrapper;
 });
 
 // Some apps may use AppRegistry.setWrapperComponentProvider to provide a custom wrapper component.
@@ -58,16 +58,7 @@ const origSetWrapperComponentProvider = AppRegistry.setWrapperComponentProvider;
 AppRegistry.setWrapperComponentProvider = (provider) => {
   console.info("RNIDE: The app is using a custom wrapper component provider");
   origSetWrapperComponentProvider((appParameters) => {
-    const RNIDEAppWrapper = require("__RNIDE_lib__/wrapper.js").PreviewAppWrapper;
     const CustomWrapper = provider(appParameters);
-    function WrapperComponent(props) {
-      const { children, ...rest } = props;
-      return (
-        <RNIDEAppWrapper {...rest}>
-          <CustomWrapper {...rest}>{children}</CustomWrapper>
-        </RNIDEAppWrapper>
-      );
-    }
-    return WrapperComponent;
+    return require("__RNIDE_lib__/wrapper.js").createNestedAppWrapper(CustomWrapper);
   });
 };

packages/vscode-extension/lib/wrapper.js

@@ -67,7 +67,7 @@ function useAgentListener(agent, eventName, listener, deps = []) {
   }, [agent, ...deps]);
 }
 
-export function PreviewAppWrapper({ children, initialProps, ..._rest }) {
+export function AppWrapper({ children, initialProps, ..._rest }) {
   const rootTag = useContext(RootTagContext);
   const [devtoolsAgent, setDevtoolsAgent] = useState(null);
   const [hasLayout, setHasLayout] = useState(false);
@@ -300,3 +300,15 @@ export function PreviewAppWrapper({ children, initialProps, ..._rest }) {
     </View>
   );
 }
+
+export function createNestedAppWrapper(InnerWrapperComponent) {
+  function WrapperComponent(props) {
+    const { children, ...rest } = props;
+    return (
+      <AppWrapper {...rest}>
+        <InnerWrapperComponent {...rest}>{children}</InnerWrapperComponent>
+      </AppWrapper>
+    );
+  }
+  return WrapperComponent;
+}