ref: Build to ESM for tree shaking (#117)

This PR changes updates our webpack config to use ESM instead of CJS
modules so we can actually do tree shaking. The reason for this is our
extension failed Chrome's review process due to some third party script
loading code from the Sentry SDK. We don't actually use this code and it
should be removed from our bundle with tree shaking.

codecov.yml

@@ -0,0 +1,3 @@
+comment:
+  require_bundle_changes: True
+  bundle_change_threshold: "0b"

package.json

@@ -14,10 +14,9 @@
   "dependencies": {
     "@fortawesome/free-solid-svg-icons": "^6.3.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
-    "@sentry/browser": "^8.37.1",
+    "@sentry/browser": "^9.1.0",
     "clsx": "^1.2.1",
     "code-tag": "^1.1.0",
-    "color-alpha": "^1.1.3",
     "dom-chef": "^5.1.0",
     "lodash": "^4.17.21",
     "react": "^18.2.0",
@@ -47,7 +46,7 @@
     "tailwindcss": "^3.2.7",
     "ts-loader": "^8.0.0",
     "tsconfig-paths-webpack-plugin": "^4.0.1",
-    "typescript": "^4.4.3 ",
+    "typescript": "^5.7.3",
     "webpack": "^5.76.0",
     "webpack-cli": "^4.0.0",
     "webpack-merge": "^5.0.0"

src/background/main.ts

@@ -1,5 +1,9 @@
 import browser from "webextension-polyfill";
-import * as Sentry from "@sentry/browser";
+import {
+  init as sentryInit,
+  browserTracingIntegration,
+  startSpan,
+} from "@sentry/browser";
 
 import { MessageType } from "src/types";
 import { Codecov } from "src/service";
@@ -11,12 +15,12 @@ import {
 async function main(): Promise<void> {
   browser.runtime.onMessage.addListener(handleMessages);
 
-  Sentry.init({
+  sentryInit({
     // @ts-ignore SENTRY_DSN is populated by Webpack at build time
     dsn: SENTRY_DSN,
 
     integrations: [
-      Sentry.browserTracingIntegration({
+      browserTracingIntegration({
         // disable automatic span creation
         instrumentNavigation: false,
         instrumentPageLoad: false,
@@ -33,7 +37,7 @@ async function handleMessages(message: {
   referrer?: string;
 }) {
   const codecov = new Codecov();
-  return Sentry.startSpan({ name: message.type }, async () => {
+  return startSpan({ name: message.type }, async () => {
     switch (message.type) {
       case MessageType.FETCH_COMMIT_REPORT:
         return codecov.fetchCommitReport(message.payload, message.referrer!);

src/content/common/sentry.ts

@@ -1,33 +1,35 @@
 import {
+  breadcrumbsIntegration,
+  browserApiErrorsIntegration,
   BrowserClient,
   defaultStackParser,
-  getDefaultIntegrations,
+  globalHandlersIntegration,
   makeFetchTransport,
+  dedupeIntegration,
   Scope,
-} from '@sentry/browser';
+} from "@sentry/browser";
 
 // Sentry config
-// Browser extensions must initialize Sentry a bit differently to avoid 
+// Browser extensions must initialize Sentry a bit differently to avoid
 // conflicts between Sentry instances should the site the extension is running
 // on also use Sentry. Read more here:
 // https://docs.sentry.io/platforms/javascript/best-practices/browser-extensions/
 
-const sentryIntegrations = getDefaultIntegrations({}).filter(defaultIntegration => {
-  return !['BrowserApiErrors', 'TryCatch', 'Breadcrumbs', 'GlobalHandlers'].includes(
-    defaultIntegration.name
-  );
-});
-
 const sentryClient = new BrowserClient({
   // @ts-ignore SENTRY_DSN is populated by Webpack at build time
   dsn: SENTRY_DSN,
   transport: makeFetchTransport,
   stackParser: defaultStackParser,
-  integrations: sentryIntegrations,
+  integrations: [
+    breadcrumbsIntegration,
+    browserApiErrorsIntegration,
+    globalHandlersIntegration,
+    dedupeIntegration,
+  ],
 });
 
 const Sentry = new Scope();
 Sentry.setClient(sentryClient);
 sentryClient.init();
 
-export default Sentry
+export default Sentry;

src/content/github/common/constants.ts

@@ -7,6 +7,9 @@ export const animationAttachmentId = `${animationName}-attachment`;
 export const seenClassName = "codecov-seen-mark";
 
 export const colors = {
+  redAlpha: "rgba(245,32,32,0.25)",
+  greenAlpha: "rgba(33,181,119,0.25)",
+  yellowAlpha: "rgba(244,176,27,0.25)",
   red: "rgb(245,32,32)",
   green: "rgb(33,181,119)",
   yellow: "rgb(244,176,27)",

src/content/github/file/main.tsx

@@ -1,5 +1,4 @@
 import browser from "webextension-polyfill";
-import alpha from "color-alpha";
 import Drop from "tether-drop";
 import _ from "lodash";
 import "tether-drop/dist/css/drop-theme-arrows.css";
@@ -353,11 +352,11 @@ function annotateLine(line: HTMLElement) {
   }
   const status = globals.coverageReport[lineNumber];
   if (status === CoverageStatus.COVERED) {
-    line.style.backgroundColor = alpha(colors.green, 0.25);
+    line.style.backgroundColor = colors.greenAlpha;
   } else if (status === CoverageStatus.UNCOVERED) {
-    line.style.backgroundColor = alpha(colors.red, 0.25);
+    line.style.backgroundColor = colors.redAlpha;
   } else if (status === CoverageStatus.PARTIAL) {
-    line.style.backgroundColor = alpha(colors.yellow, 0.25);
+    line.style.backgroundColor = colors.yellowAlpha;
   } else {
     line.style.backgroundColor = "inherit";
   }

tsconfig.json

@@ -1,8 +1,8 @@
 {
   "compilerOptions": {
     "strict": true,
-    "module": "commonjs",
-    "target": "es6",
+    "module": "esnext",
+    "target": "esnext",
     "esModuleInterop": true,
     "sourceMap": false,
     "baseUrl": "./",
@@ -15,6 +15,7 @@
     "outDir": "dist/js",
     "noEmitOnError": true,
     "jsx": "react",
-    "typeRoots": ["node_modules/@types"]
+    "typeRoots": ["node_modules/@types"],
+    "moduleResolution": "bundler"
   }
 }