working feedback screenshot package with preact

c298lee · c298lee · commit 4877b4f54e41 · 2024-02-09T12:41:13.000-05:00
diff --git a/.craft.yml b/.craft.yml
@@ -36,6 +36,10 @@ targets:
   - name: npm
     id: '@sentry-internal/replay-canvas'
     includeNames: /^sentry-internal-replay-canvas-\d.*\.tgz$/
+  ## 1.9 FeedbackScreenshot package (browser only)
+  - name: npm
+    id: '@sentry-internal/feedback-screenshot'
+    includeNames: /^sentry-internal-feedback-screenshot-\d.*\.tgz$/
 
   ## 2. Browser & Node SDKs
   - name: npm
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -108,6 +108,7 @@ jobs:
               - 'packages/replay/**'
               - 'packages/replay-canvas/**'
               - 'packages/feedback/**'
+              - 'packages/feedback-screenshot/**'
               - 'packages/wasm/**'
             browser_integration:
               - *shared
diff --git a/package.json b/package.json
@@ -56,6 +56,7 @@
     "packages/eslint-config-sdk",
     "packages/eslint-plugin-sdk",
     "packages/feedback",
+    "packages/feedback-screenshot",
     "packages/gatsby",
     "packages/integrations",
     "packages/integration-shims",
diff --git a/packages/browser/src/index.ts b/packages/browser/src/index.ts
@@ -90,3 +90,5 @@ export {
   BrowserProfilingIntegration,
   browserProfilingIntegration,
 } from './profiling/integration';
+
+console.log('browser');
diff --git a/packages/feedback-screenshot/.eslintignore b/packages/feedback-screenshot/.eslintignore
@@ -0,0 +1,2 @@
+node_modules/
+build/
diff --git a/packages/feedback-screenshot/.eslintrc.js b/packages/feedback-screenshot/.eslintrc.js
@@ -0,0 +1,25 @@
+// Note: All paths are relative to the directory in which eslint is being run, rather than the directory where this file
+// lives
+
+// ESLint config docs: https://eslint.org/docs/user-guide/configuring/
+
+module.exports = {
+  extends: ['../../.eslintrc.js'],
+  overrides: [
+    {
+      files: ['src/**/*.ts'],
+      rules: {
+        '@sentry-internal/sdk/no-unsupported-es6-methods': 'off',
+      },
+    },
+    {
+      files: ['jest.setup.ts', 'jest.config.ts'],
+      parserOptions: {
+        project: ['tsconfig.test.json'],
+      },
+      rules: {
+        'no-console': 'off',
+      },
+    },
+  ],
+};
diff --git a/packages/feedback-screenshot/.gitignore b/packages/feedback-screenshot/.gitignore
@@ -0,0 +1,4 @@
+node_modules
+/*.tgz
+.eslintcache
+build
diff --git a/packages/feedback-screenshot/LICENSE b/packages/feedback-screenshot/LICENSE
@@ -0,0 +1,14 @@
+Copyright (c) 2024 Sentry (https://sentry.io) and individual contributors. All rights reserved.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
+documentation files (the "Software"), to deal in the Software without restriction, including without limitation the
+rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit
+persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the
+Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE
+WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
+OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
diff --git a/packages/feedback-screenshot/README.md b/packages/feedback-screenshot/README.md
@@ -0,0 +1,25 @@
+<p align="center">
+  <a href="https://sentry.io/?utm_source=github&utm_medium=logo" target="_blank">
+    <img src="https://sentry-brand.storage.googleapis.com/sentry-wordmark-dark-280x84.png" alt="Sentry" width="280" height="84">
+  </a>
+</p>
+
+# Sentry Integration for Feedback with Screenshot
+
+This SDK is **considered experimental and in a beta state**. It may experience breaking changes, and may be discontinued
+at any time. Please reach out on [GitHub](https://github.com/getsentry/sentry-javascript/issues/new/choose) if you have
+any feedback/concerns.
+
+To view Feedback in Sentry, your
+[Sentry organization must be an early adopter](https://docs.sentry.io/product/accounts/early-adopter-features/).
+
+## Installation
+
+Please read the [offical integration documentation](https://docs.sentry.io/platforms/javascript/user-feedback/) for
+installation instructions.
+
+## Configuration
+
+The Feedback integration is highly customizable, please read the
+[official integration documentation](https://docs.sentry.io/platforms/javascript/user-feedback/configuration/) for the
+most up-to-date configuration options.
diff --git a/packages/feedback-screenshot/jest.config.js b/packages/feedback-screenshot/jest.config.js
@@ -0,0 +1,6 @@
+const baseConfig = require('../../jest/jest.config.js');
+
+module.exports = {
+  ...baseConfig,
+  testEnvironment: 'jsdom',
+};
diff --git a/packages/feedback-screenshot/package.json b/packages/feedback-screenshot/package.json
@@ -0,0 +1,65 @@
+{
+  "name": "@sentry-internal/feedback-screenshot",
+  "version": "7.100.0",
+  "description": "Sentry SDK integration for user feedback screenshots",
+  "repository": "git://github.com/getsentry/sentry-javascript.git",
+  "homepage": "https://github.com/getsentry/sentry-javascript/tree/master/packages/feedback",
+  "author": "Sentry",
+  "license": "MIT",
+  "engines": {
+    "node": ">=12"
+  },
+  "files": [
+    "cjs",
+    "esm",
+    "types",
+    "types-ts3.8"
+  ],
+  "main": "build/npm/cjs/index.js",
+  "module": "build/npm/esm/index.js",
+  "types": "build/npm/types/index.d.ts",
+  "typesVersions": {
+    "<4.9": {
+      "build/npm/types/index.d.ts": [
+        "build/npm/types-ts3.8/index.d.ts"
+      ]
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@sentry/core": "7.100.0",
+    "@sentry/types": "7.100.0",
+    "@sentry/utils": "7.100.0",
+    "preact": "^10.19.4",
+    "preact-compat": "^3.19.0",
+    "@rollup/plugin-alias": "5.1.0"
+  },
+  "scripts": {
+    "build": "run-p build:transpile build:types build:bundle",
+    "build:transpile": "rollup -c rollup.npm.config.mjs",
+    "build:bundle": "rollup -c rollup.bundle.config.mjs",
+    "build:dev": "run-p build:transpile build:types",
+    "build:types": "run-s build:types:core build:types:downlevel",
+    "build:types:core": "tsc -p tsconfig.types.json",
+    "build:types:downlevel": "yarn downlevel-dts build/npm/types build/npm/types-ts3.8 --to ts3.8",
+    "build:watch": "run-p build:transpile:watch build:bundle:watch build:types:watch",
+    "build:dev:watch": "run-p build:transpile:watch build:types:watch",
+    "build:transpile:watch": "yarn build:transpile --watch",
+    "build:bundle:watch": "yarn build:bundle --watch",
+    "build:types:watch": "tsc -p tsconfig.types.json --watch",
+    "build:tarball": "ts-node ../../scripts/prepack.ts --bundles && npm pack ./build/npm",
+    "circularDepCheck": "madge --circular src/index.ts",
+    "clean": "rimraf build sentry-feedback-*.tgz",
+    "fix": "eslint . --format stylish --fix",
+    "lint": "eslint . --format stylish",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "yalc:publish": "ts-node ../../scripts/prepack.ts --bundles && yalc publish ./build/npm --push --sig"
+  },
+  "volta": {
+    "extends": "../../package.json"
+  },
+  "sideEffects": false
+}
diff --git a/packages/feedback-screenshot/rollup.bundle.config.mjs b/packages/feedback-screenshot/rollup.bundle.config.mjs
@@ -0,0 +1,25 @@
+import { makeBaseBundleConfig, makeBundleConfigVariants } from '@sentry-internal/rollup-utils';
+import alias from '@rollup/plugin-alias';
+
+const baseBundleConfig = makeBaseBundleConfig({
+  bundleType: 'addon',
+  entrypoints: ['src/index.ts'],
+  jsVersion: 'es6',
+  licenseTitle: '@sentry-internal/feedback-screenshot',
+  outputFileBase: () => 'bundles/feedback-screenshot',
+  plugins: [
+    alias({
+      entries: [
+        { find: 'react', replacement: 'preact/compat' },
+        { find: 'react-dom/test-utils', replacement: 'preact/test-utils' },
+        { find: 'react-dom', replacement: 'preact/compat' },
+        { find: 'react/jsx-runtime', replacement: 'preact/jsx-runtime' }
+      ]
+    })
+  ],
+
+});
+
+const builds = makeBundleConfigVariants(baseBundleConfig);
+
+export default builds;
diff --git a/packages/feedback-screenshot/rollup.npm.config.mjs b/packages/feedback-screenshot/rollup.npm.config.mjs
@@ -0,0 +1,27 @@
+import { makeBaseNPMConfig, makeNPMConfigVariants } from '@sentry-internal/rollup-utils';
+import alias from '@rollup/plugin-alias';
+
+export default makeNPMConfigVariants(
+  makeBaseNPMConfig({
+    hasBundles: true,
+    packageSpecificConfig: {
+      output: {
+        // set exports to 'named' or 'auto' so that rollup doesn't warn
+        exports: 'named',
+        // set preserveModules to false because for Replay we actually want
+        // to bundle everything into one file.
+        preserveModules: false,
+      },
+    },
+    plugins: ['@babel/transform-react-jsx', { pragma: 'h' },
+      alias({
+        entries: [
+          { find: 'react', replacement: 'preact/compat' },
+          { find: 'react-dom/test-utils', replacement: 'preact/test-utils' },
+          { find: 'react-dom', replacement: 'preact/compat' },
+          { find: 'react/jsx-runtime', replacement: 'preact/jsx-runtime' }
+        ]
+      })
+    ],
+  }),
+);
diff --git a/packages/feedback-screenshot/scripts/craft-pre-release.sh b/packages/feedback-screenshot/scripts/craft-pre-release.sh
@@ -0,0 +1,8 @@
+#!/bin/bash
+set -eux
+OLD_VERSION="${1}"
+NEW_VERSION="${2}"
+
+# Do not tag and commit changes made by "npm version"
+export npm_config_git_tag_version=false
+npm version "${NEW_VERSION}"
diff --git a/packages/feedback-screenshot/src/index.ts b/packages/feedback-screenshot/src/index.ts
@@ -0,0 +1,8 @@
+export {
+  // eslint-disable-next-line deprecation/deprecation
+  FeedbackScreenshot,
+  feedbackScreenshotIntegration,
+} from './screenshot';
+export type { FeedbackScreenshotIntegrationOptions } from './screenshot';
+
+console.log('screenshot 6');
diff --git a/packages/feedback-screenshot/src/screenshot.ts b/packages/feedback-screenshot/src/screenshot.ts
@@ -0,0 +1,52 @@
+import { convertIntegrationFnToClass, defineIntegration } from '@sentry/core';
+import type { Integration, IntegrationClass, IntegrationFn } from '@sentry/types';
+import { Hello } from './screenshotWidget';
+import { GLOBAL_OBJ } from '@sentry/utils';
+import { h, render } from 'preact';
+
+interface FeedbackScreenshotOptions {
+  el: Element;
+  props: string;
+}
+
+export interface FeedbackScreenshotIntegrationOptions {
+  el: Element;
+  props: string;
+}
+
+const INTEGRATION_NAME = 'FeedbackScreenshot';
+const WINDOW = GLOBAL_OBJ as typeof GLOBAL_OBJ & Window;
+
+/** Exported only for type safe tests. */
+export const _feedbackScreenshotIntegration = ((options: Partial<FeedbackScreenshotOptions> = {}) => {
+  return {
+    name: INTEGRATION_NAME,
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    setupOnce() {},
+    getOptions(): FeedbackScreenshotIntegrationOptions {
+      return { el: options.el || WINDOW.document.createElement('div'), props: options.props || 'prop' };
+    },
+    renderScreenshotWidget: (options: FeedbackScreenshotOptions) => {
+      return render(h(Hello, null), options.el);
+    },
+  };
+}) satisfies IntegrationFn;
+
+/**
+ * Add this in addition to `replayIntegration()` to enable canvas recording.
+ */
+export const feedbackScreenshotIntegration = defineIntegration(_feedbackScreenshotIntegration);
+
+/**
+ * @deprecated Use `feedbackScreenshotIntegration()` instead
+ */
+// eslint-disable-next-line deprecation/deprecation
+export const FeedbackScreenshot = convertIntegrationFnToClass(
+  INTEGRATION_NAME,
+  feedbackScreenshotIntegration,
+) as IntegrationClass<
+  Integration & {
+    getOptions: () => FeedbackScreenshotIntegrationOptions;
+    renderScreenshotWidget: () => void;
+  }
+>;
diff --git a/packages/feedback-screenshot/src/screenshotWidget.tsx b/packages/feedback-screenshot/src/screenshotWidget.tsx
@@ -0,0 +1,12 @@
+import { h, render } from 'preact';
+
+interface FeedbackScreenshotOptions {
+  el: Element;
+  props: string;
+}
+
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+export function Hello(options: FeedbackScreenshotOptions) {
+  console.log('screenshot widget');
+  return h('div', null, 'hello');
+}
diff --git a/packages/feedback-screenshot/tsconfig.json b/packages/feedback-screenshot/tsconfig.json
@@ -0,0 +1,17 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "module": "esnext",
+
+   /* Preact Config */
+		"jsx": "react-jsx",
+		"jsxImportSource": "preact",
+		"skipLibCheck": true,
+		"baseUrl": "./",
+		"paths": {
+			"react": ["./node_modules/preact/compat/"],
+			"react-dom": ["./node_modules/preact/compat/"]
+		}
+  },
+  "include": ["src/**/*.ts"]
+}
diff --git a/packages/feedback-screenshot/tsconfig.test.json b/packages/feedback-screenshot/tsconfig.test.json
@@ -0,0 +1,15 @@
+{
+  "extends": "./tsconfig.json",
+
+  "include": ["test/**/*.ts", "jest.config.ts", "jest.setup.ts"],
+
+  "compilerOptions": {
+    "types": ["node", "jest"],
+    "esModuleInterop": true,
+    "allowJs": true,
+    "noImplicitAny": true,
+    "noImplicitThis": false,
+    "strictNullChecks": true,
+    "strictPropertyInitialization": false
+  }
+}
diff --git a/packages/feedback-screenshot/tsconfig.types.json b/packages/feedback-screenshot/tsconfig.types.json
@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+
+  "compilerOptions": {
+    "declaration": true,
+    "declarationMap": true,
+    "emitDeclarationOnly": true,
+    "outDir": "build/npm/types"
+  }
+}
diff --git a/yarn.lock b/yarn.lock

-Original file line number
+Diff line change
@@ @@ -0,0 +1,4 @@ @@
 +node_modules
 +/*.tgz
 +.eslintcache
 +build