feat(feedback): Create async bundles and code to resolve helper integrations

Author: ryan953

.size-limit.js

@@ -62,19 +62,12 @@ module.exports = [
     limit: '37 KB',
   },
   {
-    name: '@sentry/browser (incl. Feedback, Feedback Modal)',
+    name: '@sentry/browser (incl. FeedbackAsync)',
     path: 'packages/browser/build/npm/esm/index.js',
-    import: createImport('init', 'feedbackIntegration', 'feedbackModalIntegration'),
+    import: createImport('init', 'feedbackAsyncIntegration'),
     gzip: true,
     limit: '37 KB',
   },
-  {
-    name: '@sentry/browser (incl. Feedback, Feedback Modal, Feedback Screenshot)',
-    path: 'packages/browser/build/npm/esm/index.js',
-    import: createImport('init', 'feedbackIntegration', 'feedbackModalIntegration', 'feedbackScreenshotIntegration'),
-    gzip: true,
-    limit: '40 KB',
-  },
   {
     name: '@sentry/browser (incl. sendFeedback)',
     path: 'packages/browser/build/npm/esm/index.js',

packages/browser/src/feedback.ts

@@ -0,0 +1,24 @@
+import {
+  buildFeedbackIntegration,
+  feedbackModalIntegration,
+  feedbackScreenshotIntegration,
+  getFeedback,
+  sendFeedback,
+} from '@sentry-internal/feedback';
+import { lazyLoadIntegration } from './utils/lazyLoadIntegration';
+
+// The full feedback widget, with everything pre-loaded
+const feedbackIntegration = buildFeedbackIntegration({
+  lazyLoadIntegration,
+  getModalIntegration: () => feedbackModalIntegration,
+  getScreenshotIntegration: () => feedbackScreenshotIntegration,
+});
+
+// This is for users who want to have a lazy-loaded feedback widget
+const feedbackAsyncIntegration = buildFeedbackIntegration({
+  lazyLoadIntegration,
+  getModalIntegration: null,
+  getScreenshotIntegration: null,
+});
+
+export { getFeedback, sendFeedback, feedbackIntegration, feedbackAsyncIntegration };

packages/browser/src/index.bundle.feedback.ts

@@ -4,9 +4,7 @@ export * from './index.bundle.base';
 
 export {
   feedbackIntegration,
-  feedbackModalIntegration,
-  feedbackScreenshotIntegration,
   getFeedback,
-} from '@sentry-internal/feedback';
+} from './feedback';
 
 export { browserTracingIntegrationShim as browserTracingIntegration, replayIntegrationShim as replayIntegration };

packages/browser/src/index.bundle.tracing.replay.feedback.ts

@@ -17,10 +17,8 @@ export {
 
 export {
   feedbackIntegration,
-  feedbackModalIntegration,
-  feedbackScreenshotIntegration,
   getFeedback,
-} from '@sentry-internal/feedback';
+} from './feedback';
 
 export {
   browserTracingIntegration,

packages/browser/src/index.ts

@@ -31,12 +31,11 @@ export type {
 export { replayCanvasIntegration } from '@sentry-internal/replay-canvas';
 
 export {
+  feedbackAsyncIntegration,
   feedbackIntegration,
-  feedbackModalIntegration,
-  feedbackScreenshotIntegration,
   getFeedback,
   sendFeedback,
-} from '@sentry-internal/feedback';
+} from './feedback';
 
 export {
   defaultRequestInstrumentationOptions,

packages/feedback/rollup.npm.config.mjs

@@ -2,6 +2,7 @@ import { makeBaseNPMConfig, makeNPMConfigVariants } from '@sentry-internal/rollu
 
 export default makeNPMConfigVariants(
   makeBaseNPMConfig({
+    entrypoints: ['src/index.ts'],
     hasBundles: true,
     packageSpecificConfig: {
       output: {

packages/feedback/src/core/getFeedback.test.ts

@@ -1,6 +1,6 @@
 import { getCurrentScope } from '@sentry/core';
 import { getFeedback } from './getFeedback';
-import { feedbackIntegration } from './integration';
+import { buildFeedbackIntegration } from './integration';
 import { mockSdk } from './mockSdk';
 
 describe('getFeedback', () => {
@@ -25,7 +25,11 @@ describe('getFeedback', () => {
   });
 
   it('works with a client with Feedback', () => {
-    const feedback = feedbackIntegration();
+    const feedback = buildFeedbackIntegration({
+      lazyLoadIntegration: jest.fn(),
+      getModalIntegration: jest.fn(),
+      getScreenshotIntegration: jest.fn(),
+    });
 
     mockSdk({
       sentryOptions: {

packages/feedback/src/core/getFeedback.ts

@@ -1,10 +1,12 @@
 import { getClient } from '@sentry/core';
-import type { feedbackIntegration } from './integration';
+import type { buildFeedbackIntegration } from './integration';
+
+type FeedbackIntegration = ReturnType<typeof buildFeedbackIntegration>;
 
 /**
  * This is a small utility to get a type-safe instance of the Feedback integration.
  */
-export function getFeedback(): ReturnType<typeof feedbackIntegration> | undefined {
+export function getFeedback(): ReturnType<FeedbackIntegration> | undefined {
   const client = getClient();
-  return client && client.getIntegrationByName<ReturnType<typeof feedbackIntegration>>('Feedback');
+  return client && client.getIntegrationByName('Feedback');
 }