Merge pull request #37138 from Expensify/Rory-AddOnyxGetToWindowForEasierDebugging

Expose Onyx.get to window for easier debugging

Author: rlinoz

src/App.tsx

@@ -2,7 +2,6 @@ import {PortalProvider} from '@gorhom/portal';
 import React from 'react';
 import {LogBox} from 'react-native';
 import {GestureHandlerRootView} from 'react-native-gesture-handler';
-import Onyx from 'react-native-onyx';
 import {PickerStateProvider} from 'react-native-picker-select';
 import {SafeAreaProvider} from 'react-native-safe-area-context';
 import '../wdyr';
@@ -31,8 +30,6 @@ import {WindowDimensionsProvider} from './components/withWindowDimensions';
 import Expensify from './Expensify';
 import useDefaultDragAndDrop from './hooks/useDefaultDragAndDrop';
 import OnyxUpdateManager from './libs/actions/OnyxUpdateManager';
-import * as Session from './libs/actions/Session';
-import * as Environment from './libs/Environment/Environment';
 import InitialUrlContext from './libs/InitialUrlContext';
 import {ReportAttachmentsProvider} from './pages/home/report/ReportAttachmentsContext';
 import type {Route} from './ROUTES';
@@ -42,12 +39,6 @@ type AppProps = {
     url?: Route;
 };
 
-// For easier debugging and development, when we are in web we expose Onyx to the window, so you can more easily set data into Onyx
-if (window && Environment.isDevelopment()) {
-    window.Onyx = Onyx;
-    window.setSupportToken = Session.setSupportAuthToken;
-}
-
 LogBox.ignoreLogs([
     // Basically it means that if the app goes in the background and back to foreground on Android,
     // the timer is lost. Currently Expensify is using a 30 minutes interval to refresh personal details.

src/libs/Environment/Environment.ts

@@ -24,6 +24,13 @@ function isDevelopment(): boolean {
     return (Config?.ENVIRONMENT ?? CONST.ENVIRONMENT.DEV) === CONST.ENVIRONMENT.DEV;
 }
 
+/**
+ * Are we running the app in production?
+ */
+function isProduction(): Promise<boolean> {
+    return getEnvironment().then((environment) => environment === CONST.ENVIRONMENT.PRODUCTION);
+}
+
 /**
  * Are we running an internal test build?
  */
@@ -47,4 +54,4 @@ function getOldDotEnvironmentURL(): Promise<string> {
     return getEnvironment().then((environment) => OLDDOT_ENVIRONMENT_URLS[environment]);
 }
 
-export {getEnvironment, isInternalTestBuild, isDevelopment, getEnvironmentURL, getOldDotEnvironmentURL};
+export {getEnvironment, isInternalTestBuild, isDevelopment, isProduction, getEnvironmentURL, getOldDotEnvironmentURL};

src/setup/addUtilsToWindow.ts

@@ -0,0 +1,39 @@
+import Onyx from 'react-native-onyx';
+import * as Environment from '@libs/Environment/Environment';
+import * as Session from '@userActions/Session';
+
+/**
+ * This is used to inject development/debugging utilities into the window object on web and desktop.
+ * We do this only on non-production builds - these should not be used in any application code.
+ */
+export default function addUtilsToWindow() {
+    if (!window) {
+        return;
+    }
+
+    Environment.isProduction().then((isProduction) => {
+        if (isProduction) {
+            return;
+        }
+
+        window.Onyx = Onyx;
+
+        // We intentionally do not offer an Onyx.get API because we believe it will lead to code patterns we don't want to use in this repo, but we can offer a workaround for the sake of debugging
+        // @ts-expect-error TS233 - injecting additional utility for use in runtime debugging, should not be used in any compiled code
+        window.Onyx.get = function (key) {
+            return new Promise((resolve) => {
+                // eslint-disable-next-line rulesdir/prefer-onyx-connect-in-libs
+                const connectionID = Onyx.connect({
+                    key,
+                    callback: (value) => {
+                        Onyx.disconnect(connectionID);
+                        resolve(value);
+                    },
+                    waitForCollectionCallback: true,
+                });
+            });
+        };
+
+        window.setSupportToken = Session.setSupportAuthToken;
+    });
+}

src/setup/index.ts

@@ -6,6 +6,7 @@ import * as Device from '@userActions/Device';
 import exposeGlobalMemoryOnlyKeysMethods from '@userActions/MemoryOnlyKeys/exposeGlobalMemoryOnlyKeysMethods';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
+import addUtilsToWindow from './addUtilsToWindow';
 import initializeLastVisitedPath from './initializeLastVisitedPath';
 import platformSetup from './platformSetup';
 
@@ -59,4 +60,6 @@ export default function () {
 
     // Perform any other platform-specific setup
     platformSetup();
+
+    addUtilsToWindow();
 }