remove eslint disable in favor of feature detection

Early returns aren't supported yet unfortunately, otherwise this code would be cleaner amilajack/eslint-plugin-compat#523
rrweb-io · Sep 26, 2022 · 4e7c293 · 4e7c293
1 parent f1c0406
commit 4e7c293
Showing 1 changed file with 43 additions and 41 deletions.
diff --git a/packages/rrweb/src/record/workers/image-bitmap-data-url-worker.ts b/packages/rrweb/src/record/workers/image-bitmap-data-url-worker.ts
@@ -29,59 +29,61 @@ async function getTransparentBlobFor(
   dataURLOptions: DataURLOptions,
 ): Promise<string> {
   const id = `${width}-${height}`;
-  if (transparentBlobMap.has(id)) return transparentBlobMap.get(id)!;
-  // offScreenCanvas will significantly increase the requirements for browser compatibility so that I disable this rule here.
-  // eslint-disable-next-line compat/compat
-  const offscreen = new OffscreenCanvas(width, height);
-  offscreen.getContext('2d'); // creates rendering context for `converToBlob`
-  const blob = await offscreen.convertToBlob(dataURLOptions); // takes a while
-  const arrayBuffer = await blob.arrayBuffer();
-  const base64 = encode(arrayBuffer); // cpu intensive
-  transparentBlobMap.set(id, base64);
-  return base64;
+  if ('OffscreenCanvas' in globalThis) {
+    if (transparentBlobMap.has(id)) return transparentBlobMap.get(id)!;
+    const offscreen = new OffscreenCanvas(width, height);
+    offscreen.getContext('2d'); // creates rendering context for `converToBlob`
+    const blob = await offscreen.convertToBlob(dataURLOptions); // takes a while
+    const arrayBuffer = await blob.arrayBuffer();
+    const base64 = encode(arrayBuffer); // cpu intensive
+    transparentBlobMap.set(id, base64);
+    return base64;
+  } else {
+    return '';
+  }
 }
 
 // `as any` because: https://github.com/Microsoft/TypeScript/issues/20595
 const worker: ImageBitmapDataURLResponseWorker = self;
 
 // eslint-disable-next-line @typescript-eslint/no-misused-promises
 worker.onmessage = async function (e) {
-  if (!('OffscreenCanvas' in globalThis))
-    return worker.postMessage({ id: e.data.id });
+  if ('OffscreenCanvas' in globalThis) {
+    const { id, bitmap, width, height, dataURLOptions } = e.data;
 
-  const { id, bitmap, width, height, dataURLOptions } = e.data;
+    const transparentBase64 = getTransparentBlobFor(
+      width,
+      height,
+      dataURLOptions,
+    );
 
-  const transparentBase64 = getTransparentBlobFor(
-    width,
-    height,
-    dataURLOptions,
-  );
+    const offscreen = new OffscreenCanvas(width, height);
+    const ctx = offscreen.getContext('2d')!;
 
-  // eslint-disable-next-line compat/compat
-  const offscreen = new OffscreenCanvas(width, height);
-  const ctx = offscreen.getContext('2d')!;
+    ctx.drawImage(bitmap, 0, 0);
+    bitmap.close();
+    const blob = await offscreen.convertToBlob(dataURLOptions); // takes a while
+    const type = blob.type;
+    const arrayBuffer = await blob.arrayBuffer();
+    const base64 = encode(arrayBuffer); // cpu intensive
 
-  ctx.drawImage(bitmap, 0, 0);
-  bitmap.close();
-  const blob = await offscreen.convertToBlob(dataURLOptions); // takes a while
-  const type = blob.type;
-  const arrayBuffer = await blob.arrayBuffer();
-  const base64 = encode(arrayBuffer); // cpu intensive
+    // on first try we should check if canvas is transparent,
+    // no need to save it's contents in that case
+    if (!lastBlobMap.has(id) && (await transparentBase64) === base64) {
+      lastBlobMap.set(id, base64);
+      return worker.postMessage({ id });
+    }
 
-  // on first try we should check if canvas is transparent,
-  // no need to save it's contents in that case
-  if (!lastBlobMap.has(id) && (await transparentBase64) === base64) {
+    if (lastBlobMap.get(id) === base64) return worker.postMessage({ id }); // unchanged
+    worker.postMessage({
+      id,
+      type,
+      base64,
+      width,
+      height,
+    });
     lastBlobMap.set(id, base64);
-    return worker.postMessage({ id });
+  } else {
+    return worker.postMessage({ id: e.data.id });
   }
-
-  if (lastBlobMap.get(id) === base64) return worker.postMessage({ id }); // unchanged
-  worker.postMessage({
-    id,
-    type,
-    base64,
-    width,
-    height,
-  });
-  lastBlobMap.set(id, base64);
 };