From 91a127d897ed0eaf3eb8e524f579b85a81691416 Mon Sep 17 00:00:00 2001
From: Krzysztof Magiera <krzys@swmansion.com>
Date: Wed, 23 Oct 2024 00:21:07 +0200
Subject: [PATCH] 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 | 13 ++-----------
 packages/vscode-extension/lib/wrapper.js | 14 +++++++++++++-
 2 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/packages/vscode-extension/lib/runtime.js b/packages/vscode-extension/lib/runtime.js
index aa88d15ef..dab04b000 100644
--- a/packages/vscode-extension/lib/runtime.js
+++ b/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);
   });
 };
diff --git a/packages/vscode-extension/lib/wrapper.js b/packages/vscode-extension/lib/wrapper.js
index b10f204a7..c85e8286e 100644
--- a/packages/vscode-extension/lib/wrapper.js
+++ b/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;
+}