ref(feedback): Refactor Feedback types into @sentry/types and reduce …

…the exported surface area (getsentry#11355)

You can read this commit-by-commit to watch the refactor unfold

The situation is: after
getsentry#11342 is merged, all
the code inside each of the
`packages/feedback/src/[core|modal|screenshot]` will be split up into
separate integrations. These integrations can't share the same
`src/types/*.ts` definitions anymore. Therefore type definitions will
need to live in @sentry/types instead.

This PR moves all the types, and since they'll be public now in that
package, i refactored things to reduce the public surface area and
improve names where possible.
The only non-type changes in here are where we move `createDialog.ts`
and `createInput.ts` into their respective `integration.ts` files, no
code changes at all.

Related to getsentry#11435

packages/feedback/src/core/createMainStyles.ts

@@ -1,7 +1,7 @@
+import type { FeedbackInternalOptions } from '@sentry/types';
 import { DOCUMENT } from '../constants';
-import type { FeedbackTheme, FeedbackThemes } from '../types';
 
-function getThemedCssVariables(theme: FeedbackTheme): string {
+function getThemedCssVariables(theme: FeedbackInternalOptions['themeLight']): string {
  return `
  --background: ${theme.background};
  --background-hover: ${theme.backgroundHover};
@@ -39,7 +39,10 @@ function getThemedCssVariables(theme: FeedbackTheme): string {
 /**
  * Creates <style> element for widget actor (button that opens the dialog)
  */
-export function createMainStyles(colorScheme: 'system' | 'dark' | 'light', themes: FeedbackThemes): HTMLStyleElement {
+export function createMainStyles(
+ colorScheme: 'system' | 'dark' | 'light',
+ themes: Pick<FeedbackInternalOptions, 'themeLight' | 'themeDark'>,
+): HTMLStyleElement {
  const style = DOCUMENT.createElement('style');
  style.textContent = `
 :host {

packages/feedback/src/core/integration.ts

@@ -1,5 +1,11 @@
 import { getClient } from '@sentry/core';
-import type { Integration, IntegrationFn } from '@sentry/types';
+import type {
+ FeedbackDialog,
+ FeedbackInternalOptions,
+ FeedbackModalIntegration,
+ FeedbackScreenshotIntegration,
+ IntegrationFn,
+} from '@sentry/types';
 import { isBrowser, logger } from '@sentry/utils';
 import {
  ACTOR_LABEL,
@@ -17,34 +23,16 @@ import {
  SUBMIT_BUTTON_LABEL,
  SUCCESS_MESSAGE_TEXT,
 } from '../constants';
-import type { IFeedbackModalIntegration } from '../modal/integration';
-import type { IFeedbackScreenshotIntegration } from '../screenshot/integration';
-import type {
- Dialog,
- FeedbackInternalOptions,
- OptionalFeedbackConfiguration,
- OverrideFeedbackConfiguration,
-} from '../types';
 import { DEBUG_BUILD } from '../util/debug-build';
 import { isScreenshotSupported } from '../util/isScreenshotSupported';
 import { mergeOptions } from '../util/mergeOptions';
 import { Actor } from './components/Actor';
 import { createMainStyles } from './createMainStyles';
 import { sendFeedback } from './sendFeedback';
+import type { OptionalFeedbackConfiguration, OverrideFeedbackConfiguration } from './types';
 
 type Unsubscribe = () => void;
 
-interface PublicFeedbackIntegration {
- attachTo: (el: Element | string, optionOverrides: OverrideFeedbackConfiguration) => () => void;
- createWidget: (optionOverrides: OverrideFeedbackConfiguration & { shouldCreateActor?: boolean }) => Promise<Dialog>;
- getWidget: () => Dialog | null;
- remove: () => void;
- openDialog: () => void;
- closeDialog: () => void;
- removeWidget: () => void;
-}
-export type IFeedbackIntegration = Integration & PublicFeedbackIntegration;
-
 /**
  * Allow users to capture user feedback and send it to Sentry.
  */
@@ -148,13 +136,13 @@ export const feedbackIntegration = (({
  return _shadow as ShadowRoot;
  };
 
- const _loadAndRenderDialog = async (options: FeedbackInternalOptions): Promise<Dialog> => {
+ const _loadAndRenderDialog = async (options: FeedbackInternalOptions): Promise<FeedbackDialog> => {
  const client = getClient(); // TODO: getClient<BrowserClient>()
  if (!client) {
  throw new Error('Sentry Client is not initialized correctly');
  }
- const modalIntegration = client.getIntegrationByName<IFeedbackModalIntegration>('FeedbackModal');
- const screenshotIntegration = client.getIntegrationByName<IFeedbackScreenshotIntegration>('FeedbackScreenshot');
+ const modalIntegration = client.getIntegrationByName<FeedbackModalIntegration>('FeedbackModal');
+ const screenshotIntegration = client.getIntegrationByName<FeedbackScreenshotIntegration>('FeedbackScreenshot');
  const screenshotIsSupported = isScreenshotSupported();
 
  // START TEMP: Error messages
@@ -196,7 +184,7 @@ export const feedbackIntegration = (({
  throw new Error('Unable to attach to target element');
  }
 
- let dialog: Dialog | null = null;
+ let dialog: FeedbackDialog | null = null;
  const handleClick = async (): Promise<void> => {
  if (!dialog) {
  dialog = await _loadAndRenderDialog({
@@ -264,7 +252,7 @@ export const feedbackIntegration = (({
  /**
  * Creates a new widget. Accepts partial options to override any options passed to constructor.
  */
- async createWidget(optionOverrides: OverrideFeedbackConfiguration = {}): Promise<Dialog> {
+ async createWidget(optionOverrides: OverrideFeedbackConfiguration = {}): Promise<FeedbackDialog> {
  return _loadAndRenderDialog(mergeOptions(_options, optionOverrides));
  },
 

packages/feedback/src/core/sendFeedback.ts

@@ -1,17 +1,16 @@
 import { createAttachmentEnvelope, createEventEnvelope, getClient, withScope } from '@sentry/core';
-import type { FeedbackEvent, TransportMakeRequestResponse } from '@sentry/types';
+import type { FeedbackEvent, SendFeedback, SendFeedbackParams } from '@sentry/types';
 import { getLocationHref } from '@sentry/utils';
 import { FEEDBACK_API_SOURCE, FEEDBACK_WIDGET_SOURCE } from '../constants';
-import type { SendFeedbackOptions, SendFeedbackParams } from '../types';
 import { prepareFeedbackEvent } from '../util/prepareFeedbackEvent';
 
 /**
  * Public API to send a Feedback item to Sentry
  */
-export async function sendFeedback(
+export const sendFeedback: SendFeedback = (
  { name, email, message, attachments, source = FEEDBACK_API_SOURCE, url = getLocationHref() }: SendFeedbackParams,
- { includeReplay = true }: SendFeedbackOptions = {},
-): Promise<TransportMakeRequestResponse> {
+ { includeReplay = true } = {},
+) => {
  if (!message) {
  throw new Error('Unable to submit feedback with empty message');
  }
@@ -97,7 +96,7 @@ export async function sendFeedback(
  throw error;
  }
  });
-}
+};
 
 /*
  * For reference, the fully built event looks something like this:

packages/feedback/src/core/types.ts

@@ -0,0 +1,19 @@
+import type { FeedbackInternalOptions } from '@sentry/types';
+
+/**
+ * Partial configuration that overrides default configuration values
+ *
+ * This is the config that gets passed into the integration constructor
+ */
+export interface OptionalFeedbackConfiguration
+ extends Omit<Partial<FeedbackInternalOptions>, 'themeLight' | 'themeDark'> {
+ themeLight?: Partial<FeedbackInternalOptions['themeLight']>;
+ themeDark?: Partial<FeedbackInternalOptions['themeLight']>;
+}
+
+/**
+ * Partial configuration that overrides default configuration values
+ *
+ * This is the config that gets passed into the integration constructor
+ */
+export type OverrideFeedbackConfiguration = Omit<Partial<FeedbackInternalOptions>, 'themeLight' | 'themeDark'>;

packages/feedback/src/index.ts

@@ -3,6 +3,3 @@ export { feedbackIntegration } from './core/integration';
 export { feedbackModalIntegration } from './modal/integration';
 export { getFeedback } from './core/getFeedback';
 export { feedbackScreenshotIntegration } from './screenshot/integration';
-
-export type { OptionalFeedbackConfiguration } from './types';
-export type { IFeedbackIntegration } from './core/integration';

packages/feedback/src/modal/components/DialogContainer.tsx

@@ -1,9 +1,9 @@
+import type { FeedbackFormData } from '@sentry/types';
 // biome-ignore lint/nursery/noUnusedImports: reason
 import { Fragment, h } from 'preact'; // eslint-disable-line @typescript-eslint/no-unused-vars
 import type { VNode } from 'preact';
 import { useCallback, useMemo, useState } from 'preact/hooks';
 import { SUCCESS_MESSAGE_TIMEOUT } from '../../constants';
-import type { FeedbackFormData } from '../../types';
 import { DialogContent } from './DialogContent';
 import { DialogHeader } from './DialogHeader';
 import type { Props as HeaderProps } from './DialogHeader';

packages/feedback/src/modal/components/DialogHeader.tsx

@@ -1,8 +1,8 @@
+import type { FeedbackInternalOptions } from '@sentry/types';
 // biome-ignore lint/nursery/noUnusedImports: reason
 import { h } from 'preact'; // eslint-disable-line @typescript-eslint/no-unused-vars
 import type { VNode } from 'preact';
 import { useMemo } from 'preact/hooks';
-import type { FeedbackInternalOptions } from '../../types';
 import type { Props as LogoProps } from './SentryLogo';
 import { SentryLogo } from './SentryLogo';
 

packages/feedback/src/modal/components/Form.tsx

@@ -1,16 +1,15 @@
+import type {
+ FeedbackFormData,
+ FeedbackInternalOptions,
+ FeedbackScreenshotIntegration,
+ SendFeedback,
+} from '@sentry/types';
 import { logger } from '@sentry/utils';
 // biome-ignore lint/nursery/noUnusedImports: reason
 import { h } from 'preact'; // eslint-disable-line @typescript-eslint/no-unused-vars
 import type { JSX, VNode } from 'preact';
 import { useCallback, useState } from 'preact/hooks';
 import { FEEDBACK_WIDGET_SOURCE } from '../../constants';
-import type {
- FeedbackFormData,
- FeedbackInternalOptions,
- ScreenshotInput,
- SendFeedbackOptions,
- SendFeedbackParams,
-} from '../../types';
 import { DEBUG_BUILD } from '../../util/debug-build';
 import { getMissingFields } from '../../util/validate';
 
@@ -34,10 +33,10 @@ export interface Props
  defaultEmail: string;
  defaultName: string;
  onFormClose: () => void;
- onSubmit: (data: SendFeedbackParams, options?: SendFeedbackOptions) => void;
+ onSubmit: SendFeedback;
  onSubmitSuccess: (data: FeedbackFormData) => void;
  onSubmitError: (error: Error) => void;
- screenshotInput: ScreenshotInput | undefined;
+ screenshotInput: ReturnType<FeedbackScreenshotIntegration['createInput']> | undefined;
 }
 
 function retrieveStringValue(formData: FormData, key: string): string {
@@ -74,8 +73,8 @@ export function Form({
  const [error, setError] = useState<null | string>(null);
 
  const [showScreenshotInput, setShowScreenshotInput] = useState(false);
- const ScreenshotInput = screenshotInput && screenshotInput.input;
- const includeScreenshotValue = ScreenshotInput && showScreenshotInput;
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ const ScreenshotInputComponent: any = screenshotInput && screenshotInput.input;
 
  const [screenshotError, setScreenshotError] = useState<null | Error>(null);
  const onScreenshotError = useCallback((error: Error) => {
@@ -112,7 +111,7 @@ export function Form({
  return;
  }
  const formData = new FormData(e.target);
- const attachment = await (includeScreenshotValue ? screenshotInput.value() : undefined);
+ const attachment = await (screenshotInput && showScreenshotInput ? screenshotInput.value() : undefined);
  const data: FeedbackFormData = {
  name: retrieveStringValue(formData, 'name'),
  email: retrieveStringValue(formData, 'email'),
@@ -134,12 +133,14 @@ export function Form({
  // pass
  }
  },
- [includeScreenshotValue, onSubmitSuccess, onSubmitError],
+ [screenshotInput && showScreenshotInput, onSubmitSuccess, onSubmitError],
  );
 
  return (
  <form class="form" onSubmit={handleSubmit}>
- {includeScreenshotValue ? <ScreenshotInput onError={onScreenshotError} /> : null}
+ {ScreenshotInputComponent && showScreenshotInput ? (
+ <ScreenshotInputComponent onError={onScreenshotError} />
+ ) : null}
 
  <div class="form__right">
  <div class="form__top">
@@ -192,7 +193,7 @@ export function Form({
  />
  </label>
 
- {ScreenshotInput ? (
+ {ScreenshotInputComponent ? (
  <label for="screenshot" class="form__label">
  <span class="form__label__text">Screenshot</span>
 

packages/feedback/src/modal/components/SentryLogo.ts

@@ -1,5 +1,5 @@
+import type { FeedbackInternalOptions } from '@sentry/types';
 import { DOCUMENT } from '../../constants';
-import type { FeedbackInternalOptions } from '../../types';
 import { setAttributesNS } from '../../util/setAttributesNS';
 
 const XMLNS = 'http://www.w3.org/2000/svg';