upstream: Merge upstream commits up to 609b7fac79a552f746dc880a28927dee382cd082

.changeset/inlineImage-maybeNot-crossOrigin.md

@@ -0,0 +1,6 @@
+---
+"rrweb": patch
+"rrweb-snapshot": patch
+---
+
+inlineImages: during snapshot avoid adding an event listener for inlining of same-origin images (async listener mutates the snapshot which can be problematic)

.changeset/kind-kids-design.md

@@ -0,0 +1,5 @@
+---
+"rrweb": patch
+---
+
+Optimize performance of isParentRemoved by converting it to an iterative procedure

.changeset/no-neg-lookbehind.md

@@ -0,0 +1,6 @@
+---
+"rrweb-snapshot": patch
+"rrweb": patch
+---
+
+Replay: Replace negative lookbehind in regexes from css parser as it causes issues with Safari 16

.changeset/pre.json

@@ -27,16 +27,22 @@
     "cool-grapes-hug",
     "cuddly-readers-warn",
     "curvy-apples-lay",
+    "curvy-balloons-brake",
     "date-now-guard",
     "dirty-rules-dress",
     "eight-terms-hunt",
+    "eleven-bobcats-peel",
     "empty-bikes-cheer",
+    "event-single-wrap",
     "fair-dragons-greet",
+    "fair-ducks-clean",
     "fast-chefs-smell",
+    "fast-pets-exist",
     "few-rockets-travel",
     "few-turkeys-reflect",
     "five-peas-lay",
     "fluffy-planes-retire",
+    "format-head-prettier",
     "forty-elephants-attack",
     "fresh-cars-impress",
     "fresh-spoons-drive",
@@ -45,6 +51,7 @@
     "gold-terms-look",
     "grumpy-ways-own",
     "hip-worms-relax",
+    "hungry-dodos-taste",
     "itchy-dryers-double",
     "khaki-dots-bathe",
     "large-ants-prove",
@@ -61,8 +68,10 @@
     "mighty-ads-worry",
     "mighty-bulldogs-begin",
     "mighty-frogs-sparkle",
+    "modern-doors-watch",
     "moody-dots-refuse",
     "nervous-buses-pump",
+    "nervous-kiwis-nail",
     "nervous-mirrors-perform",
     "nervous-poets-grin",
     "nervous-tables-travel",

.changeset/proud-clocks-hope.md

@@ -0,0 +1,5 @@
+---
+"rrweb-snapshot": patch
+---
+
+(when `recordCanvas: true`): ensure we use doc.createElement instead of document.createElement to allow use in non-browser e.g. jsdom environments

.changeset/shadow-dom-unbusify.md

@@ -0,0 +1,5 @@
+---
+"rrweb": patch
+---
+
+Refactor to preclude the need for a continuous raf loop running in the background which is related to shadowDom

.changeset/silent-plants-perform.md

@@ -0,0 +1,5 @@
+---
+"rrweb": patch
+---
+
+Return early for child same origin frames

packages/rrdom-nodejs/CHANGELOG.md

@@ -1,5 +1,13 @@
 # rrdom-nodejs
 
+## 2.0.0-alpha.14
+
+### Patch Changes
+
+- Updated dependencies [[`03b5216`](https://github.com/rrweb-io/rrweb/commit/03b5216a9403f1509b4f69d1d71ef9874277fe91), [`46f1b25`](https://github.com/rrweb-io/rrweb/commit/46f1b252a5919c68c68e825bd6089cc2e7d34e7c), [`cbbd1e5`](https://github.com/rrweb-io/rrweb/commit/cbbd1e55f1f7fa2eed9fa11e4152b509bdfd88f7), [`5e7943d`](https://github.com/rrweb-io/rrweb/commit/5e7943dbae6e2cde76c484bdd26bc0b96f1b6dce), [`c0f83af`](https://github.com/rrweb-io/rrweb/commit/c0f83afab8f1565633de0e986b7e96fa56f2d25c), [`e96f668`](https://github.com/rrweb-io/rrweb/commit/e96f668c86bd0ab5dc190bb2957a170271bb2ebc)]:
+  - [email protected]
+  - [email protected]
+
 ## 2.0.0-alpha.13
 
 ### Patch Changes

packages/rrdom/CHANGELOG.md

@@ -1,5 +1,12 @@
 # rrdom
 
+## 2.0.0-alpha.14
+
+### Patch Changes
+
+- Updated dependencies [[`03b5216`](https://github.com/rrweb-io/rrweb/commit/03b5216a9403f1509b4f69d1d71ef9874277fe91), [`46f1b25`](https://github.com/rrweb-io/rrweb/commit/46f1b252a5919c68c68e825bd6089cc2e7d34e7c), [`cbbd1e5`](https://github.com/rrweb-io/rrweb/commit/cbbd1e55f1f7fa2eed9fa11e4152b509bdfd88f7), [`5e7943d`](https://github.com/rrweb-io/rrweb/commit/5e7943dbae6e2cde76c484bdd26bc0b96f1b6dce), [`c0f83af`](https://github.com/rrweb-io/rrweb/commit/c0f83afab8f1565633de0e986b7e96fa56f2d25c), [`e96f668`](https://github.com/rrweb-io/rrweb/commit/e96f668c86bd0ab5dc190bb2957a170271bb2ebc)]:
+  - [email protected]
+
 ## 2.0.0-alpha.13
 
 ### Patch Changes

packages/rrvideo/CHANGELOG.md

@@ -1,5 +1,12 @@
 # rrvideo
 
+## 2.0.0-alpha.14
+
+### Patch Changes
+
+- Updated dependencies []:
+  - [email protected]
+
 ## 2.0.0-alpha.13
 
 ### Patch Changes

packages/rrweb-player/CHANGELOG.md

@@ -1,5 +1,12 @@
 # rrweb-player
 
+## 2.0.0-alpha.14
+
+### Patch Changes
+
+- Updated dependencies [[`03b5216`](https://github.com/rrweb-io/rrweb/commit/03b5216a9403f1509b4f69d1d71ef9874277fe91), [`ae6908d`](https://github.com/rrweb-io/rrweb/commit/ae6908dcdcd7c732c1ce79eea19de5240bec1151), [`46f1b25`](https://github.com/rrweb-io/rrweb/commit/46f1b252a5919c68c68e825bd6089cc2e7d34e7c), [`cbbd1e5`](https://github.com/rrweb-io/rrweb/commit/cbbd1e55f1f7fa2eed9fa11e4152b509bdfd88f7), [`e96f668`](https://github.com/rrweb-io/rrweb/commit/e96f668c86bd0ab5dc190bb2957a170271bb2ebc)]:
+  - [email protected]
+
 ## 2.0.0-alpha.13
 
 ### Patch Changes

packages/rrweb-snapshot/CHANGELOG.md

@@ -1,5 +1,26 @@
 # rrweb-snapshot
 
+## 2.0.0-alpha.14
+
+### Patch Changes
+
+- [#1464](https://github.com/rrweb-io/rrweb/pull/1464) [`03b5216`](https://github.com/rrweb-io/rrweb/commit/03b5216a9403f1509b4f69d1d71ef9874277fe91) Thanks [@colingm](https://github.com/colingm)! - better support for coexistence with older libraries (e.g. MooTools & Prototype.js) which modify the in-built `Array.from` function
+
+- [#1481](https://github.com/rrweb-io/rrweb/pull/1481) [`46f1b25`](https://github.com/rrweb-io/rrweb/commit/46f1b252a5919c68c68e825bd6089cc2e7d34e7c) Thanks [@eoghanmurray](https://github.com/eoghanmurray)! - Fix and test for bug #1457 which was affecting replay of complex tailwind css
+
+- [#1476](https://github.com/rrweb-io/rrweb/pull/1476) [`cbbd1e5`](https://github.com/rrweb-io/rrweb/commit/cbbd1e55f1f7fa2eed9fa11e4152b509bdfd88f7) Thanks [@eoghanmurray](https://github.com/eoghanmurray)! - Fixup for multiple background-clip replacement
+
+- [#1387](https://github.com/rrweb-io/rrweb/pull/1387) [`5e7943d`](https://github.com/rrweb-io/rrweb/commit/5e7943dbae6e2cde76c484bdd26bc0b96f1b6dce) Thanks [@H4ad](https://github.com/H4ad)! - Avoid recreating the same element every time, instead, we cache and we just update the element.
+
+  Before: 779k ops/s
+  After: 860k ops/s
+
+  Benchmark: https://jsbench.me/ktlqztuf95/1
+
+- [#1440](https://github.com/rrweb-io/rrweb/pull/1440) [`c0f83af`](https://github.com/rrweb-io/rrweb/commit/c0f83afab8f1565633de0e986b7e96fa56f2d25c) Thanks [@daibhin](https://github.com/daibhin)! - better nested css selector splitting when commas or brackets happen to be in quoted text
+
+- [#1467](https://github.com/rrweb-io/rrweb/pull/1467) [`e96f668`](https://github.com/rrweb-io/rrweb/commit/e96f668c86bd0ab5dc190bb2957a170271bb2ebc) Thanks [@eoghanmurray](https://github.com/eoghanmurray)! - Bugfix after #1434 perf improvements: fix that blob urls persist on the shared anchor element and can't be later modified
+
 ## 2.0.0-alpha.13
 
 ### Minor Changes

packages/rrweb-snapshot/src/css.ts

@@ -898,8 +898,8 @@ export function parse(css: string, options: ParserOptions = {}) {
         name +
         '\\s*((?:' +
         [
-          '(?<!\\\\)"(?:\\\\"|[^"])*"',
-          "(?<!\\\\)'(?:\\\\'|[^'])*'",
+          /[^\\]"(?:\\"|[^"])*"/.source, // consume any quoted parts (checking that the double quote isn't itself escaped)
+          /[^\\]'(?:\\'|[^'])*'/.source, // same but for single quotes
           '[^;]',
         ].join('|') +
         ')+);',

packages/rrweb-snapshot/src/rebuild.ts

@@ -5,7 +5,7 @@
   tagMap,
   elementNode,
   BuildCache,
   attributes,
   legacyAttributes,
 } from './types';
 import { isElement, Mirror, isNodeMetaEqual } from './utils';
@@ -278,7 +278,7 @@
         const value = specialAttributes[name];
         // handle internal attributes
         if (tagName === 'canvas' && name === 'rr_dataURL') {
-          const image = document.createElement('img');
+          const image = doc.createElement('img');
           image.onload = () => {
             const ctx = (node as HTMLCanvasElement).getContext('2d');
             if (ctx) {
@@ -502,7 +502,7 @@
 
   for (const id of mirror.getIds()) {
     if (mirror.has(id)) {
       walk(mirror.getNode(id)!);
     }
   }
 }

packages/rrweb-snapshot/src/snapshot.ts

@@ -276,7 +276,7 @@
 export function ignoreAttribute(
   tagName: string,
   name: string,
   _value: unknown,
 ): boolean {
   return (tagName === 'video' || tagName === 'audio') && name === 'autoplay';
 }
@@ -513,7 +513,7 @@
   iframeEl.addEventListener('load', listener);
 }
 
 function isStylesheetLoaded(link: HTMLLinkElement) {
   if (!link.getAttribute('href')) return true; // nothing to load
   return link.sheet !== null;
 }
@@ -722,7 +722,7 @@
         // So we'll be conservative and keep textContent as-is.
       } else if ((n.parentNode as HTMLStyleElement).sheet?.cssRules) {
         textContent = stringifyStylesheet(
           (n.parentNode as HTMLStyleElement).sheet!,
         );
       }
     } catch (err) {
@@ -829,7 +829,7 @@
     keepIframeSrcFn,
     newlyAddedElement = false,
     rootId,
     maskAllText,
     maskTextClass,
     unmaskTextClass,
     maskTextSelector,
@@ -871,7 +871,7 @@
     if (cssText) {
       delete attributes.rel;
       delete attributes.href;
       attributes._cssText = absoluteToStylesheet(cssText, stylesheet!.href!);
     }
   }
   // dynamic stylesheet
@@ -956,7 +956,7 @@
       );
 
       // create blank canvas of same dimensions
-      const blankCanvas = document.createElement('canvas');
+      const blankCanvas = doc.createElement('canvas');
       blankCanvas.width = (n as HTMLCanvasElement).width;
       blankCanvas.height = (n as HTMLCanvasElement).height;
       const blankCanvasDataURL = blankCanvas.toDataURL(
@@ -977,26 +977,37 @@
       canvasCtx = canvasService.getContext('2d');
     }
     const image = n as HTMLImageElement;
-    const oldValue = image.crossOrigin;
-    image.crossOrigin = 'anonymous';
+    const imageSrc: string =
+      image.currentSrc || image.getAttribute('src') || '<unknown-src>';
+    const priorCrossOrigin = image.crossOrigin;
     const recordInlineImage = () => {
       image.removeEventListener('load', recordInlineImage);
       try {
         canvasService!.width = image.naturalWidth;
         canvasService!.height = image.naturalHeight;
         canvasCtx!.drawImage(image, 0, 0);
         attributes.rr_dataURL = canvasService!.toDataURL(
           dataURLOptions.type,
           dataURLOptions.quality,
         );
       } catch (err) {
-        console.warn(
-          `Cannot inline img src=${image.currentSrc}! Error: ${err as string}`,
-        );
+        if (image.crossOrigin !== 'anonymous') {
+          image.crossOrigin = 'anonymous';
+          if (image.complete && image.naturalWidth !== 0)
+            recordInlineImage(); // too early due to image reload
+          else image.addEventListener('load', recordInlineImage);
+          return;
+        } else {
+          console.warn(
+            `Cannot inline img src=${imageSrc}! Error: ${err as string}`,
+          );
+        }
+      }
+      if (image.crossOrigin === 'anonymous') {
+        priorCrossOrigin
+          ? (attributes.crossOrigin = priorCrossOrigin)
+          : image.removeAttribute('crossorigin');
       }
-      oldValue
-        ? (attributes.crossOrigin = oldValue)
-        : image.removeAttribute('crossorigin');
     };
     // The image content may not have finished loading yet.
     if (image.complete && image.naturalWidth !== 0) recordInlineImage();

packages/rrweb-snapshot/test/__snapshots__/integration.test.ts.snap

@@ -413,6 +413,7 @@ exports[`integration tests [html file]: mask-text.html 1`] = `
 exports[`integration tests [html file]: picture.html 1`] = `
 "<html xmlns=\\"http://www.w3.org/1999/xhtml\\"><head></head><body>
     <picture>
+      <!-- these are 404 - not sure if that's intentional -->
       <source type=\\"image/webp\\" srcset=\\"http://localhost:3030/assets/img/characters/robot.webp\\" />
       <img src=\\"http://localhost:3030/assets/img/characters/robot.png\\" />
     </picture>

packages/rrweb-snapshot/test/html/picture.html

@@ -1,6 +1,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
   <body>
     <picture>
+      <!-- these are 404 - not sure if that's intentional -->
       <source type="image/webp" srcset="assets/img/characters/robot.webp" />
       <img src="assets/img/characters/robot.png" />
     </picture>

packages/rrweb-snapshot/test/integration.test.ts

@@ -6,7 +6,7 @@ import * as puppeteer from 'puppeteer';
 import * as rollup from 'rollup';
 import * as typescript from 'rollup-plugin-typescript2';
 import * as assert from 'assert';
-import { waitForRAF } from './utils';
+import { waitForRAF, getServerURL } from './utils';
 
 const _typescript = typescript as unknown as () => rollup.Plugin;
 
@@ -209,12 +209,63 @@ iframe.contentDocument.querySelector('center').clientHeight
         inlineImages: true,
         inlineStylesheet: false
     })`);
-    await waitForRAF(page);
-    const snapshot = (await page.evaluate(
-      'JSON.stringify(snapshot, null, 2);',
-    )) as string;
-    assert(snapshot.includes('"rr_dataURL"'));
-    assert(snapshot.includes('data:image/webp;base64,'));
+    // don't wait, as we want to ensure that the same-origin image can be inlined immediately
+    const bodyChildren = (await page.evaluate(`
+      snapshot.childNodes[0].childNodes[1].childNodes.filter((cn) => cn.type === 2);
+`)) as any[];
+    expect(bodyChildren[1]).toEqual(
+      expect.objectContaining({
+        tagName: 'img',
+        attributes: {
+          src: expect.stringMatching(/images\/robot.png$/),
+          alt: 'This is a robot',
+          rr_dataURL: expect.stringMatching(/^data:image\/webp;base64,/),
+        },
+      }),
+    );
+  });
+
+  it('correctly saves cross-origin images offline', async () => {
+    const page: puppeteer.Page = await browser.newPage();
+
+    await page.goto('about:blank', {
+      waitUntil: 'load',
+    });
+    await page.setContent(
+      `
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <body>
+    <img src="${getServerURL(
+      server,
+    )}/images/rrweb-favicon-20x20.png" alt="CORS restricted but has access-control-allow-origin: *" />
+  </body>
+</html>
+`,
+      {
+        waitUntil: 'load',
+      },
+    );
+
+    await page.waitForSelector('img', { timeout: 1000 });
+    await page.evaluate(`${code}var snapshot = rrweb.snapshot(document, {
+        dataURLOptions: { type: "image/webp", quality: 0.8 },
+        inlineImages: true,
+        inlineStylesheet: false
+    })`);
+    await waitForRAF(page); // need a small wait, as after the crossOrigin="anonymous" change, the snapshot triggers a reload of the image (after which, the snapshot is mutated)
+    const bodyChildren = (await page.evaluate(`
+      snapshot.childNodes[0].childNodes[1].childNodes.filter((cn) => cn.type === 2);
+`)) as any[];
+    expect(bodyChildren[0]).toEqual(
+      expect.objectContaining({
+        tagName: 'img',
+        attributes: {
+          src: getServerURL(server) + '/images/rrweb-favicon-20x20.png',
+          alt: 'CORS restricted but has access-control-allow-origin: *',
+          rr_dataURL: expect.stringMatching(/^data:image\/webp;base64,/),
+        },
+      }),
+    );
   });
 
   it('correctly saves blob:images offline', async () => {

packages/rrweb-snapshot/test/snapshot.test.ts

@@ -9,6 +9,7 @@ import {
   _isBlockedElement,
   needMaskingText,
 } from '../src/snapshot';
+import snapshot from '../src/snapshot';
 import { serializedNodeWithId } from '../src/types';
 import { Mirror } from '../src/utils';
 
@@ -578,3 +579,27 @@ describe('needMaskingText', () => {
     });
   });
 });
+
+describe('jsdom snapshot', () => {
+  const render = (html: string): Document => {
+    document.write(html);
+    return document;
+  };
+
+  it("doesn't rely on global browser objects", () => {
+    // this test is incomplete in terms of coverage,
+    // but the idea being that we are checking that all features use the
+    // passed-in `doc` object rather than the global `document`
+    // (which is only present in browsers)
+    // in any case, supporting jsdom is not a primary goal
+
+    const doc = render(`<!DOCTYPE html><p>Hello world</p><canvas></canvas>`);
+    const sn = snapshot(doc, {
+      // JSDOM Error: Not implemented: HTMLCanvasElement.prototype.toDataURL (without installing the canvas npm package)
+      //recordCanvas: true,
+    });
+    expect(sn).toMatchObject({
+      type: 0,
+    });
+  });
+});

packages/rrweb-snapshot/test/utils.ts

@@ -1,4 +1,5 @@
 import * as puppeteer from 'puppeteer';
+import * as http from 'http';
 
 export async function waitForRAF(page: puppeteer.Page) {
   return await page.evaluate(() => {
@@ -9,3 +10,12 @@ export async function waitForRAF(page: puppeteer.Page) {
     });
   });
 }
+
+export function getServerURL(server: http.Server): string {
+  const address = server.address();
+  if (address && typeof address !== 'string') {
+    return `http://localhost:${address.port}`;
+  } else {
+    return `${address}`;
+  }
+}