ref(feedback): Do not import window from browser pkg to avoid circular import (#9604)

We will be exporting the Feedback package from the `@sentry/browser`
package, so to avoid circular imports when we do, we should remove
imports from `@sentry/browser`

(this is what we did in Replay)

Author: billyvg

packages/feedback/package.json

@@ -23,7 +23,6 @@
     "access": "public"
   },
   "dependencies": {
-    "@sentry/browser": "7.81.0",
     "@sentry/core": "7.81.0",
     "@sentry/types": "7.81.0",
     "@sentry/utils": "7.81.0"

packages/feedback/src/constants.ts

@@ -1,3 +1,10 @@
+import { GLOBAL_OBJ } from '@sentry/utils';
+
+// exporting a separate copy of `WINDOW` rather than exporting the one from `@sentry/browser`
+// prevents the browser package from being bundled in the CDN bundle, and avoids a
+// circular dependency between the browser and feedback packages
+export const WINDOW = GLOBAL_OBJ as typeof GLOBAL_OBJ & Window;
+
 const LIGHT_BACKGROUND = '#ffffff';
 const INHERIT = 'inherit';
 const SUBMIT_COLOR = 'rgba(108, 95, 199, 1)';

packages/feedback/src/integration.ts

@@ -1,4 +1,3 @@
-import { WINDOW } from '@sentry/browser';
 import type { Integration } from '@sentry/types';
 import { isBrowser, logger } from '@sentry/utils';
 
@@ -15,6 +14,7 @@ import {
   NAME_PLACEHOLDER,
   SUBMIT_BUTTON_LABEL,
   SUCCESS_MESSAGE_TEXT,
+  WINDOW,
 } from './constants';
 import type { FeedbackInternalOptions, FeedbackWidget, OptionalFeedbackConfiguration } from './types';
 import { mergeOptions } from './util/mergeOptions';

packages/feedback/src/widget/Icon.ts

@@ -1,5 +1,4 @@
-import { WINDOW } from '@sentry/browser';
-
+import { WINDOW } from '../constants';
 import { setAttributesNS } from '../util/setAttributesNS';
 
 const SIZE = 20;

packages/feedback/src/widget/Logo.ts

@@ -1,5 +1,4 @@
-import { WINDOW } from '@sentry/browser';
-
+import { WINDOW } from '../constants';
 import type { FeedbackInternalOptions } from '../types';
 import { setAttributesNS } from '../util/setAttributesNS';
 

packages/feedback/src/widget/SuccessIcon.ts

@@ -1,5 +1,4 @@
-import { WINDOW } from '@sentry/browser';
-
+import { WINDOW } from '../constants';
 import { setAttributesNS } from '../util/setAttributesNS';
 
 const WIDTH = 16;

packages/feedback/src/widget/createShadowHost.ts

@@ -1,6 +1,6 @@
-import { WINDOW } from '@sentry/browser';
 import { logger } from '@sentry/utils';
 
+import { WINDOW } from '../constants';
 import type { FeedbackInternalOptions } from '../types';
 import { createDialogStyles } from './Dialog.css';
 import { createMainStyles } from './Main.css';

packages/feedback/src/widget/util/createElement.ts

@@ -1,4 +1,4 @@
-import { WINDOW } from '@sentry/browser';
+import { WINDOW } from '../../constants';
 
 /**
  * Helper function to create an element. Could be used as a JSX factory