fix(feedback): Inject preact from feedbackModal into feedbackScreenshot integration

docs/migration/feedback.md

@@ -14,15 +14,15 @@ Below you can find a list of relevant feedback changes and issues that have been
 We have streamlined the interface for interacting with the Feedback widget. Below is a list of public functions that
 existed in 7.x and a description of how they have changed in v8.
 
-| Method Name                                                   | Replacement                                                    | Notes                                                                                                                                                                                                                |
-| ------------------------------------------------------------- | -------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `Sentry.getClient<BrowserClient>()?.getIntegration(Feedback)` | `const feedback = Sentry.getFeedback()`                        | Get a type-safe reference to the configured feedbackIntegration instance.                                                                                                                                            |
-| `feedback.getWidget()`                                        | `const widget = feedback.createWidget(); widget.appendToDom()` | The SDK no longer maintains a stack of form instances. If you call `createWidget()` a new widget will be inserted into the DOM and an `ActorComponent` returned allows you control over the lifecycle of the widget. |
-| `feedback.openDialog()`                                       | `widget.open()`                                                | Make the form inside the widget visible.                                                                                                                                                                             |
-| `feedback.closeDialog()`                                      | `widget.close()`                                               | Make the form inside the widget hidden in the page. Success/Error messages will still be rendered and will hide themselves if the form was recently submitted.                                                       |
-| `feedback.removeWidget()`                                     | `widget.removeFromDom()`                                       | Remove the form and widget instance from the page. After calling this `widget.el.parentNode` will be set to null.                                                                                                    |
-| `feedback.attachTo()`                                         | `const unsubscribe = feedback.attachTo(myButtonElem)`          | The `attachTo()` method will create an onClick event listener to your html element that calls `appendToDom()` and `open()`. It returns a callback to remove the event listener.                                      |
-| -                                                             | `const form = await feedback.createForm()`                     | A new method `createForm()`, used internally by `createWidget()` and `attachTo()`, returns a `Promise<FeedbackDialog>` so you can control showing and hiding of the feedback form directly.                          |
+| Method Name                                                   | Replacement                                                    | Notes                                                                                                                                                                                                                             |
+| ------------------------------------------------------------- | -------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `Sentry.getClient<BrowserClient>()?.getIntegration(Feedback)` | `const feedback = Sentry.getFeedback()`                        | Get a type-safe reference to the configured feedbackIntegration instance.                                                                                                                                                         |
+| `feedback.getWidget()`                                        | `const widget = feedback.createWidget(); widget.appendToDom()` | The SDK no longer maintains a stack of form instances. If you call `createWidget()` a new widget will be inserted into the DOM and an `ActorComponent` returned allows you control over the lifecycle of the widget.              |
+| `feedback.openDialog()`                                       | `widget.open()`                                                | Make the form inside the widget visible.                                                                                                                                                                                          |
+| `feedback.closeDialog()`                                      | `widget.close()`                                               | Make the form inside the widget hidden in the page. Success/Error messages will still be rendered and will hide themselves if the form was recently submitted.                                                                    |
+| `feedback.removeWidget()`                                     | `widget.removeFromDom()`                                       | Remove the form and widget instance from the page. After calling this `widget.el.parentNode` will be set to null.                                                                                                                 |
+| `feedback.attachTo()`                                         | `const unsubscribe = feedback.attachTo(myButtonElem)`          | The `attachTo()` method will create an onClick event listener to your html element that calls `appendToDom()` and `open()`. It returns a callback to remove the event listener.                                                   |
+| -                                                             | `const form = await feedback.createForm()`                     | A new method `createForm()`, used internally by `createWidget()` and `attachTo()`, returns a `Promise<ReturnType<FeedbackModalIntegration['createDialog']>>` so you can control showing and hiding of the feedback form directly. |
 
 ### API Examples
 

packages/feedback/src/core/integration.ts

@@ -1,6 +1,5 @@
 import { getClient } from '@sentry/core';
 import type {
-  FeedbackDialog,
   FeedbackInternalOptions,
   FeedbackModalIntegration,
   FeedbackScreenshotIntegration,
@@ -56,7 +55,9 @@ export const buildFeedbackIntegration = ({
 }: BuilderOptions): IntegrationFn<
   Integration & {
     attachTo(el: Element | string, optionOverrides?: OverrideFeedbackConfiguration): Unsubscribe;
-    createForm(optionOverrides?: OverrideFeedbackConfiguration): Promise<FeedbackDialog>;
+    createForm(
+      optionOverrides?: OverrideFeedbackConfiguration,
+    ): Promise<ReturnType<FeedbackModalIntegration['createDialog']>>;
     createWidget(optionOverrides?: OverrideFeedbackConfiguration): ActorComponent;
     remove(): void;
   }
@@ -179,7 +180,9 @@ export const buildFeedbackIntegration = ({
       return integration as I;
     };
 
-    const _loadAndRenderDialog = async (options: FeedbackInternalOptions): Promise<FeedbackDialog> => {
+    const _loadAndRenderDialog = async (
+      options: FeedbackInternalOptions,
+    ): Promise<ReturnType<FeedbackModalIntegration['createDialog']>> => {
       const screenshotRequired = options.enableScreenshot && isScreenshotSupported();
       const [modalIntegration, screenshotIntegration] = await Promise.all([
         _findIntegration<FeedbackModalIntegration>('FeedbackModal', getModalIntegration, 'feedbackModalIntegration'),
@@ -223,7 +226,7 @@ export const buildFeedbackIntegration = ({
         throw new Error('Unable to attach to target element');
       }
 
-      let dialog: FeedbackDialog | null = null;
+      let dialog: ReturnType<FeedbackModalIntegration['createDialog']> | null = null;
       const handleClick = async (): Promise<void> => {
         if (!dialog) {
           dialog = await _loadAndRenderDialog({
@@ -306,7 +309,9 @@ export const buildFeedbackIntegration = ({
        * Creates a new Form which you can
        * Accepts partial options to override any options passed to constructor.
        */
-      async createForm(optionOverrides: OverrideFeedbackConfiguration = {}): Promise<FeedbackDialog> {
+      async createForm(
+        optionOverrides: OverrideFeedbackConfiguration = {},
+      ): Promise<ReturnType<FeedbackModalIntegration['createDialog']>> {
         return _loadAndRenderDialog(mergeOptions(_options, optionOverrides));
       },
 

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

@@ -3,6 +3,7 @@ import type { FeedbackFormData, FeedbackInternalOptions } from '@sentry/types';
 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 { DialogHeader } from './DialogHeader';
 import type { Props as HeaderProps } from './DialogHeader';

packages/feedback/src/modal/integration.tsx

@@ -1,13 +1,7 @@
 import { getCurrentScope, getGlobalScope, getIsolationScope } from '@sentry/core';
-import type {
-  CreateDialogProps,
-  FeedbackDialog,
-  FeedbackFormData,
-  FeedbackModalIntegration,
-  IntegrationFn,
-  User,
-} from '@sentry/types';
+import type { FeedbackFormData, FeedbackModalIntegration, IntegrationFn, User } from '@sentry/types';
 import { h, render } from 'preact';
+import * as hooks from 'preact/hooks';
 import { DOCUMENT } from '../constants';
 import { Dialog } from './components/Dialog';
 import { createDialogStyles } from './components/Dialog.css';
@@ -30,7 +24,7 @@ export const feedbackModalIntegration = ((): FeedbackModalIntegration => {
     name: 'FeedbackModal',
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     setupOnce() {},
-    createDialog: ({ options, screenshotIntegration, sendFeedback, shadow }: CreateDialogProps) => {
+    createDialog: ({ options, screenshotIntegration, sendFeedback, shadow }) => {
       const shadowRoot = shadow as unknown as ShadowRoot;
       const userKey = options.useSentryUser;
       const user = getUser();
@@ -39,7 +33,7 @@ export const feedbackModalIntegration = ((): FeedbackModalIntegration => {
       const style = createDialogStyles();
 
       let originalOverflow = '';
-      const dialog: FeedbackDialog = {
+      const dialog: ReturnType<FeedbackModalIntegration['createDialog']> = {
         get el() {
           return el;
         },
@@ -66,7 +60,7 @@ export const feedbackModalIntegration = ((): FeedbackModalIntegration => {
         },
       };
 
-      const screenshotInput = screenshotIntegration && screenshotIntegration.createInput(h, dialog, options);
+      const screenshotInput = screenshotIntegration && screenshotIntegration.createInput({ h, hooks, dialog, options });
 
       const renderContent = (open: boolean): void => {
         render(

packages/feedback/src/screenshot/components/ScreenshotEditor.tsx

@@ -1,12 +1,10 @@
-import type { FeedbackDialog, FeedbackInternalOptions } from '@sentry/types';
 /* eslint-disable max-lines */
+import type { FeedbackInternalOptions, FeedbackModalIntegration } from '@sentry/types';
 import type { ComponentType, VNode, h as hType } from 'preact';
-// biome-ignore lint: needed for preact
-import { h } from 'preact'; // eslint-disable-line @typescript-eslint/no-unused-vars
-import { useCallback, useEffect, useMemo, useRef, useState } from 'preact/hooks';
+import type * as Hooks from 'preact/hooks';
 import { DOCUMENT, WINDOW } from '../../constants';
 import { createScreenshotInputStyles } from './ScreenshotInput.css';
-import { useTakeScreenshot } from './useTakeScreenshot';
+import { useTakeScreenshotFactory } from './useTakeScreenshot';
 
 const CROP_BUTTON_SIZE = 30;
 const CROP_BUTTON_BORDER = 3;
@@ -15,8 +13,9 @@ const DPI = WINDOW.devicePixelRatio;
 
 interface FactoryParams {
   h: typeof hType;
+  hooks: typeof Hooks;
   imageBuffer: HTMLCanvasElement;
-  dialog: FeedbackDialog;
+  dialog: ReturnType<FeedbackModalIntegration['createDialog']>;
   options: FeedbackInternalOptions;
 }
 
@@ -62,17 +61,25 @@ const getContainedSize = (img: HTMLCanvasElement): Box => {
   return { startX: x, startY: y, endX: width + x, endY: height + y };
 };
 
-export function makeScreenshotEditorComponent({ imageBuffer, dialog, options }: FactoryParams): ComponentType<Props> {
+export function ScreenshotEditorFactory({
+  h, // eslint-disable-line @typescript-eslint/no-unused-vars
+  hooks,
+  imageBuffer,
+  dialog,
+  options,
+}: FactoryParams): ComponentType<Props> {
+  const useTakeScreenshot = useTakeScreenshotFactory({ hooks });
+
   return function ScreenshotEditor({ onError }: Props): VNode {
-    const styles = useMemo(() => ({ __html: createScreenshotInputStyles().innerText }), []);
+    const styles = hooks.useMemo(() => ({ __html: createScreenshotInputStyles().innerText }), []);
 
-    const canvasContainerRef = useRef<HTMLDivElement>(null);
-    const cropContainerRef = useRef<HTMLDivElement>(null);
-    const croppingRef = useRef<HTMLCanvasElement>(null);
-    const [croppingRect, setCroppingRect] = useState<Box>({ startX: 0, startY: 0, endX: 0, endY: 0 });
-    const [confirmCrop, setConfirmCrop] = useState(false);
+    const canvasContainerRef = hooks.useRef<HTMLDivElement>(null);
+    const cropContainerRef = hooks.useRef<HTMLDivElement>(null);
+    const croppingRef = hooks.useRef<HTMLCanvasElement>(null);
+    const [croppingRect, setCroppingRect] = hooks.useState<Box>({ startX: 0, startY: 0, endX: 0, endY: 0 });
+    const [confirmCrop, setConfirmCrop] = hooks.useState(false);
 
-    useEffect(() => {
+    hooks.useEffect(() => {
       WINDOW.addEventListener('resize', resizeCropper, false);
     }, []);
 
@@ -99,7 +106,7 @@ export function makeScreenshotEditorComponent({ imageBuffer, dialog, options }:
       setCroppingRect({ startX: 0, startY: 0, endX: imageDimensions.width, endY: imageDimensions.height });
     }
 
-    useEffect(() => {
+    hooks.useEffect(() => {
       const cropper = croppingRef.current;
       if (!cropper) {
         return;
@@ -141,7 +148,7 @@ export function makeScreenshotEditorComponent({ imageBuffer, dialog, options }:
       DOCUMENT.addEventListener('mousemove', handleMouseMove);
     }
 
-    const makeHandleMouseMove = useCallback((corner: string) => {
+    const makeHandleMouseMove = hooks.useCallback((corner: string) => {
       return function (e: MouseEvent) {
         if (!croppingRef.current) {
           return;
@@ -218,10 +225,10 @@ export function makeScreenshotEditorComponent({ imageBuffer, dialog, options }:
     }
 
     useTakeScreenshot({
-      onBeforeScreenshot: useCallback(() => {
+      onBeforeScreenshot: hooks.useCallback(() => {
         (dialog.el as HTMLElement).style.display = 'none';
       }, []),
-      onScreenshot: useCallback(
+      onScreenshot: hooks.useCallback(
         (imageSource: HTMLVideoElement) => {
           const context = imageBuffer.getContext('2d');
           if (!context) {
@@ -235,13 +242,13 @@ export function makeScreenshotEditorComponent({ imageBuffer, dialog, options }:
         },
         [imageBuffer],
       ),
-      onAfterScreenshot: useCallback(() => {
+      onAfterScreenshot: hooks.useCallback(() => {
         (dialog.el as HTMLElement).style.display = 'block';
         const container = canvasContainerRef.current;
         container && container.appendChild(imageBuffer);
         resizeCropper();
       }, []),
-      onError: useCallback(error => {
+      onError: hooks.useCallback(error => {
         (dialog.el as HTMLElement).style.display = 'block';
         onError(error);
       }, []),

packages/feedback/src/screenshot/components/useTakeScreenshot.tsx

@@ -1,45 +1,51 @@
-// biome-ignore lint/nursery/noUnusedImports: reason
-import { h } from 'preact'; // eslint-disable-line @typescript-eslint/no-unused-vars
-import { useEffect } from 'preact/hooks';
+import type * as Hooks from 'preact/hooks';
 import { DOCUMENT, NAVIGATOR, WINDOW } from '../../constants';
 
+interface FactoryParams {
+  hooks: typeof Hooks;
+}
+
 interface Props {
   onBeforeScreenshot: () => void;
   onScreenshot: (imageSource: HTMLVideoElement) => void;
   onAfterScreenshot: () => void;
   onError: (error: Error) => void;
 }
 
-export const useTakeScreenshot = ({ onBeforeScreenshot, onScreenshot, onAfterScreenshot, onError }: Props): void => {
-  useEffect(() => {
-    const takeScreenshot = async (): Promise<void> => {
-      onBeforeScreenshot();
-      const stream = await NAVIGATOR.mediaDevices.getDisplayMedia({
-        video: {
-          width: WINDOW.innerWidth * WINDOW.devicePixelRatio,
-          height: WINDOW.innerHeight * WINDOW.devicePixelRatio,
-        },
-        audio: false,
-        // @ts-expect-error experimental flags: https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia#prefercurrenttab
-        monitorTypeSurfaces: 'exclude',
-        preferCurrentTab: true,
-        selfBrowserSurface: 'include',
-        surfaceSwitching: 'exclude',
-      });
+type UseTakeScreenshot = ({ onBeforeScreenshot, onScreenshot, onAfterScreenshot, onError }: Props) => void;
 
-      const video = DOCUMENT.createElement('video');
-      await new Promise<void>((resolve, reject) => {
-        video.srcObject = stream;
-        video.onloadedmetadata = () => {
-          onScreenshot(video);
-          stream.getTracks().forEach(track => track.stop());
-          resolve();
-        };
-        video.play().catch(reject);
-      });
-      onAfterScreenshot();
-    };
+export function useTakeScreenshotFactory({ hooks }: FactoryParams): UseTakeScreenshot {
+  return function useTakeScreenshot({ onBeforeScreenshot, onScreenshot, onAfterScreenshot, onError }: Props) {
+    hooks.useEffect(() => {
+      const takeScreenshot = async (): Promise<void> => {
+        onBeforeScreenshot();
+        const stream = await NAVIGATOR.mediaDevices.getDisplayMedia({
+          video: {
+            width: WINDOW.innerWidth * WINDOW.devicePixelRatio,
+            height: WINDOW.innerHeight * WINDOW.devicePixelRatio,
+          },
+          audio: false,
+          // @ts-expect-error experimental flags: https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia#prefercurrenttab
+          monitorTypeSurfaces: 'exclude',
+          preferCurrentTab: true,
+          selfBrowserSurface: 'include',
+          surfaceSwitching: 'exclude',
+        });
 
-    takeScreenshot().catch(onError);
-  }, []);
-};
+        const video = DOCUMENT.createElement('video');
+        await new Promise<void>((resolve, reject) => {
+          video.srcObject = stream;
+          video.onloadedmetadata = () => {
+            onScreenshot(video);
+            stream.getTracks().forEach(track => track.stop());
+            resolve();
+          };
+          video.play().catch(reject);
+        });
+        onAfterScreenshot();
+      };
+
+      takeScreenshot().catch(onError);
+    }, []);
+  };
+}