ref: decouple button from HookStore

Author: TkDodo

static/app/components/core/button/useButtonFunctionality.tsx

@@ -1,29 +1,10 @@
-// eslint-disable-next-line boundaries/element-types
-import HookStore from 'sentry/stores/hookStore';
+import {useButtonTracking} from 'sentry/components/core/trackingContext';
 
 import type {
   DO_NOT_USE_ButtonProps as ButtonProps,
   DO_NOT_USE_LinkButtonProps as LinkButtonProps,
 } from './types';
 
-const defaultCreateButtonTracking = (props: ButtonProps) => {
-  const hasAnalyticsDebug = window.localStorage?.getItem('DEBUG_ANALYTICS') === '1';
-  return () => {
-    const hasCustomAnalytics =
-      props.analyticsEventName || props.analyticsEventKey || props.analyticsParams;
-    if (hasCustomAnalytics && hasAnalyticsDebug) {
-      // eslint-disable-next-line no-console
-      console.log('buttonAnalyticsEvent', {
-        eventKey: props.analyticsEventKey,
-        eventName: props.analyticsEventName,
-        priority: props.priority,
-        href: 'href' in props ? props.href : undefined,
-        ...props.analyticsParams,
-      });
-    }
-  };
-};
-
 export function useButtonFunctionality(props: ButtonProps | LinkButtonProps) {
   // Fallbacking aria-label to string children is not necessary as screen
   // readers natively understand that scenario. Leaving it here for a bunch of
@@ -32,10 +13,7 @@ export function useButtonFunctionality(props: ButtonProps | LinkButtonProps) {
     props['aria-label'] ??
     (typeof props.children === 'string' ? props.children : undefined);
 
-  const createButtonTracking =
-    HookStore.get('react-hook:use-button-tracking')[0] ?? defaultCreateButtonTracking;
-
-  const buttonTracking = createButtonTracking({
+  const buttonTracking = useButtonTracking({
     analyticsEventName: props.analyticsEventName,
     analyticsEventKey: props.analyticsEventKey,
     analyticsParams: {

static/app/components/core/trackingContext.tsx

@@ -0,0 +1,33 @@
+import {createContext, useContext} from 'react';
+
+import type {DO_NOT_USE_ButtonProps as ButtonProps} from './button/types';
+
+const defaultButtonTracking = (props: ButtonProps) => {
+  const hasAnalyticsDebug = window.localStorage?.getItem('DEBUG_ANALYTICS') === '1';
+  return () => {
+    const hasCustomAnalytics =
+      props.analyticsEventName || props.analyticsEventKey || props.analyticsParams;
+    if (hasCustomAnalytics && hasAnalyticsDebug) {
+      // eslint-disable-next-line no-console
+      console.log('buttonAnalyticsEvent', {
+        eventKey: props.analyticsEventKey,
+        eventName: props.analyticsEventName,
+        priority: props.priority,
+        href: 'href' in props ? props.href : undefined,
+        ...props.analyticsParams,
+      });
+    }
+  };
+};
+
+const TrackingContext = createContext<{
+  useButtonTracking?: (props: ButtonProps) => () => void;
+}>({});
+
+export const TrackingContextProvider = TrackingContext.Provider;
+
+export const useButtonTracking = (props: ButtonProps) => {
+  const context = useContext(TrackingContext);
+
+  return context.useButtonTracking?.(props) ?? defaultButtonTracking(props);
+};

static/app/main.tsx

@@ -1,13 +1,15 @@
-import {useState} from 'react';
+import {useMemo, useState} from 'react';
 import {createBrowserRouter, RouterProvider} from 'react-router-dom';
 import {wrapCreateBrowserRouterV6} from '@sentry/react';
 import {ReactQueryDevtools} from '@tanstack/react-query-devtools';
 
 import {AppQueryClientProvider} from 'sentry/appQueryClient';
+import {TrackingContextProvider} from 'sentry/components/core/trackingContext';
 import {OnboardingContextProvider} from 'sentry/components/onboarding/onboardingContext';
 import {ThemeAndStyleProvider} from 'sentry/components/themeAndStyleProvider';
 import {USE_REACT_QUERY_DEVTOOL} from 'sentry/constants';
 import {routes} from 'sentry/routes';
+import HookStore from 'sentry/stores/hookStore';
 import {DANGEROUS_SET_REACT_ROUTER_6_HISTORY} from 'sentry/utils/browserHistory';
 
 import {buildReactRouter6Routes} from './utils/reactRouter6Compat/router';
@@ -22,12 +24,16 @@ function buildRouter() {
 
 function Main() {
   const [router] = useState(buildRouter);
+  const useButtonTracking = HookStore.get('react-hook:use-button-tracking')[0];
+  const trackingContextValue = useMemo(() => ({useButtonTracking}), [useButtonTracking]);
 
   return (
     <AppQueryClientProvider>
       <ThemeAndStyleProvider>
         <OnboardingContextProvider>
-          <RouterProvider router={router} />
+          <TrackingContextProvider value={trackingContextValue}>
+            <RouterProvider router={router} />
+          </TrackingContextProvider>
         </OnboardingContextProvider>
         {USE_REACT_QUERY_DEVTOOL && (
           <ReactQueryDevtools initialIsOpen={false} buttonPosition="bottom-left" />