fix: remove passive:true from event listener patch (#98)

Removes the `passive:true` option which breaks `preventDefault` for drag and drop in angular. To reproduce, 1. Clone the angular example repo: ```shell git clone [email protected]:aptlin/angular-scratchpad.git rakesh ``` 2. Add ` "dev:rakesh": "yarn turbo run dev --filter rakesh... --filter frontend...",` to `scripts` and `rakesh` to `workspaces` in the highlight package.json 3. Run `yarn dev:rakesh` with and without this change.
highlight · Vadman97 · Dec 15, 2020 · Sep 27, 2022 · Sep 27, 2022 · Sep 29, 2022
commit 41594b5d0241049aab65cd5fbd0020e09736b191
diff --git a/packages/rrweb-snapshot/package.json b/packages/rrweb-snapshot/package.json
@@ -44,7 +44,7 @@
     "@types/chai": "^4.1.4",
     "@types/jest": "^27.0.2",
     "@types/jsdom": "^20.0.0",
-    "@types/node": "^10.11.3",
+    "@types/node": "^18.11.15",
     "@types/puppeteer": "^1.12.4",
     "cross-env": "^5.2.0",
     "eslint": "^8.23.1",

diff --git a/packages/rrweb-snapshot/src/css.ts b/packages/rrweb-snapshot/src/css.ts
@@ -345,7 +345,7 @@ export function parse(css: string, options: ParserOptions = {}) {
     whitespace();
     comments(rules);
     while (css.length && css.charAt(0) !== '}' && (node = atrule() || rule())) {
-      if (node !== false) {
+      if ((node as unknown) !== false) {
         rules.push(node);
         comments(rules);
       }
@@ -383,7 +383,7 @@ export function parse(css: string, options: ParserOptions = {}) {
   function comments(rules: Rule[] = []) {
     let c: Comment | void;
     while ((c = comment())) {
-      if (c !== false) {
+      if ((c as unknown) !== false) {
         rules.push(c);
       }
       c = comment();

diff --git a/packages/rrweb-snapshot/src/snapshot.ts b/packages/rrweb-snapshot/src/snapshot.ts
@@ -1333,14 +1333,14 @@ function snapshot(
         }
       : maskAllInputs;
   const slimDOMOptions: SlimDOMOptions =
-    slimDOM === true || slimDOM === 'all'
+    slimDOM === true || (slimDOM as unknown) === 'all'
       ? // if true: set of sensible options that should not throw away any information
         {
           script: true,
           comment: true,
           headFavicon: true,
           headWhitespace: true,
-          headMetaDescKeywords: slimDOM === 'all', // destructive
+          headMetaDescKeywords: (slimDOM as unknown) === 'all', // destructive
           headMetaSocial: true,
           headMetaRobots: true,
           headMetaHttpEquiv: true,

diff --git a/packages/rrweb/package.json b/packages/rrweb/package.json
@@ -52,7 +52,7 @@
     "@types/inquirer": "^8.2.1",
     "@types/jest": "^27.4.1",
     "@types/jest-image-snapshot": "^5.1.0",
-    "@types/node": "^17.0.21",
+    "@types/node": "^18.11.15",
     "@types/offscreencanvas": "^2019.6.4",
     "@types/prettier": "^2.3.2",
     "@types/puppeteer": "^5.4.4",

diff --git a/packages/rrweb/src/record/observers/canvas/canvas.ts b/packages/rrweb/src/record/observers/canvas/canvas.ts
@@ -25,7 +25,7 @@ export default function initCanvasContextObserver(
           ...args: Array<unknown>
         ) {
           if (!isBlocked(this, blockClass, blockSelector, true)) {
-            if (!('__context' in this)) this.__context = contextType;
+            if (!this.__context) this.__context = contextType;
           }
           return original.apply(this, [contextType, ...args]);
         };

diff --git a/packages/rrweb/src/record/observers/canvas/webgl.ts b/packages/rrweb/src/record/observers/canvas/webgl.ts
@@ -49,15 +49,22 @@ function patchGLPrototype(
           return function (this: typeof prototype, ...args: Array<unknown>) {
             const result = original.apply(this, args);
             saveWebGLVar(result, win, this);
-            if (!isBlocked(this.canvas, blockClass, blockSelector, true)) {
+            if (
+              !isBlocked(
+                this.canvas as HTMLCanvasElement,
+                blockClass,
+                blockSelector,
+                true,
+              )
+            ) {
               const recordArgs = serializeArgs([...args], win, this);
               const mutation: canvasMutationWithType = {
                 type,
                 property: prop,
                 args: recordArgs,
               };
               // TODO: this could potentially also be an OffscreenCanvas as well as HTMLCanvasElement
-              cb(this.canvas, mutation);
+              cb(this.canvas as HTMLCanvasElement, mutation);
             }
 
             return result;

diff --git a/packages/rrweb/src/utils.ts b/packages/rrweb/src/utils.ts
@@ -22,7 +22,7 @@ export function on(
   fn: EventListenerOrEventListenerObject,
   target: Document | IWindow = document,
 ): listenerHandler {
-  const options = { capture: true, passive: true };
+  const options = { capture: true };
   target.addEventListener(type, fn, options);
   return () => target.removeEventListener(type, fn, options);
 }