upstream: merge commits up to 46f1b25

.changeset/curvy-balloons-brake.md

@@ -0,0 +1,2 @@
+---
+---

.changeset/eleven-bobcats-peel.md

@@ -1,6 +1,6 @@
 ---
-'rrweb-snapshot': patch
-'rrweb': patch
+"rrweb-snapshot": patch
+"rrweb": patch
 ---
 
 better support for coexistence with older libraries (e.g. MooTools & Prototype.js) which modify the in-built `Array.from` function

.changeset/fair-ducks-clean.md

@@ -0,0 +1,6 @@
+---
+"rrweb-snapshot": patch
+"rrweb": patch
+---
+
+Fix and test for bug #1457 which was affecting replay of complex tailwind css

.changeset/fast-pets-exist.md

@@ -0,0 +1,6 @@
+---
+"rrweb-snapshot": patch
+"rrweb": patch
+---
+
+Fixup for multiple background-clip replacement

.changeset/format-head-prettier.md

@@ -0,0 +1,2 @@
+---
+---

.changeset/hungry-dodos-taste.md

@@ -0,0 +1,10 @@
+---
+'rrweb-snapshot': patch
+---
+
+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

.changeset/little-moons-camp.md

@@ -1,6 +1,6 @@
 ---
-'rrweb-snapshot': minor
-'rrweb': minor
+"rrweb-snapshot": minor
+"rrweb": minor
 ---
 
 feat: Better masking of option/radio/checkbox values

.changeset/nervous-kiwis-nail.md

@@ -0,0 +1,6 @@
+---
+'rrweb-snapshot': patch
+'rrweb': patch
+---
+
+Bugfix after #1434 perf improvements: fix that blob urls persist on the shared anchor element and can't be later modified

.changeset/twenty-tables-call.md

@@ -1,6 +1,6 @@
 ---
-'rrweb-snapshot': patch
-'rrweb': patch
+"rrweb-snapshot": patch
+"rrweb": patch
 ---
 
 Add `maskAttributesFn` to be called when transforming an attribute. This is typically used to determine if an attribute should be masked or not.

.editorconfig

@@ -0,0 +1,14 @@
+root = true
+
+# initialized from https://prettier.io/docs/en/configuration.html#editorconfig
+[*]
+charset = utf-8
+insert_final_newline = true
+end_of_line = lf
+indent_style = space
+indent_size = 2
+max_line_length = 80
+quote_type = single
+
+[.changeset/*.md]
+quote_type = double

.gitignore

@@ -18,6 +18,9 @@ dist
 
 .turbo
 
+# emacs working files end in a tilde
+*~
+
 # `.yarn/install-state.gz` is an optimization file that you shouldn't ever have to commit. 
 # It simply stores the exact state of your project so that the next commands can boot without having to resolve your workspaces all over again.
 .yarn/install-state.gz

.prettierignore

@@ -0,0 +1,107 @@
+# list of old changeset files that were mutated to use single quotes by a previous version of prettier:
+.changeset/attribute-text-reductions.md
+.changeset/avoid-costly-createlement.md
+.changeset/brave-numbers-joke.md
+.changeset/breezy-cats-heal.md
+.changeset/breezy-mice-breathe.md
+.changeset/calm-bulldogs-speak.md
+.changeset/calm-oranges-sin.md
+.changeset/chatty-cherries-train.md
+.changeset/clean-plants-play.md
+.changeset/clean-shrimps-lay.md
+.changeset/cold-eyes-hunt.md
+.changeset/cold-hounds-teach.md
+.changeset/controller-finish-flag.md
+.changeset/cool-grapes-hug.md
+.changeset/cuddly-readers-warn.md
+.changeset/curvy-apples-lay.md
+.changeset/curvy-balloons-brake.md
+.changeset/date-now-guard.md
+.changeset/dirty-rules-dress.md
+.changeset/eight-terms-hunt.md
+.changeset/empty-bikes-cheer.md
+.changeset/event-single-wrap.md
+.changeset/fair-dragons-greet.md
+.changeset/fast-chefs-smell.md
+.changeset/few-rockets-travel.md
+.changeset/few-turkeys-reflect.md
+.changeset/five-peas-lay.md
+.changeset/fluffy-planes-retire.md
+.changeset/forty-elephants-attack.md
+.changeset/fresh-cars-impress.md
+.changeset/fresh-spoons-drive.md
+.changeset/friendly-numbers-leave.md
+.changeset/gold-apples-joke.md
+.changeset/gold-terms-look.md
+.changeset/grumpy-ways-own.md
+.changeset/hip-worms-relax.md
+.changeset/hungry-dodos-taste.md
+.changeset/itchy-dryers-double.md
+.changeset/khaki-dots-bathe.md
+.changeset/large-ants-prove.md
+.changeset/lazy-squids-draw.md
+.changeset/lazy-toes-confess.md
+.changeset/lemon-lamps-switch.md
+.changeset/light-fireants-exercise.md
+.changeset/little-radios-thank.md
+.changeset/little-suits-leave.md
+.changeset/loud-seals-raise.md
+.changeset/lovely-pears-cross.md
+.changeset/lovely-students-boil.md
+.changeset/mean-tips-impress.md
+.changeset/mighty-ads-worry.md
+.changeset/mighty-bulldogs-begin.md
+.changeset/mighty-frogs-sparkle.md
+.changeset/modern-doors-watch.md
+.changeset/moody-dots-refuse.md
+.changeset/nervous-buses-pump.md
+.changeset/nervous-kiwis-nail.md
+.changeset/nervous-mirrors-perform.md
+.changeset/nervous-poets-grin.md
+.changeset/nervous-tables-travel.md
+.changeset/new-snakes-call.md
+.changeset/nice-pugs-reply.md
+.changeset/old-dryers-hide.md
+.changeset/polite-olives-wave.md
+.changeset/pretty-plums-rescue.md
+.changeset/pretty-schools-remember.md
+.changeset/proud-experts-jam.md
+.changeset/rare-adults-sneeze.md
+.changeset/README.md
+.changeset/real-masks-explode.md
+.changeset/real-trains-switch.md
+.changeset/rich-crews-protect.md
+.changeset/rich-dots-lay.md
+.changeset/rich-jars-remember.md
+.changeset/rotten-spies-enjoy.md
+.changeset/serious-ants-juggle.md
+.changeset/silver-pots-sit.md
+.changeset/silver-windows-float.md
+.changeset/sixty-impalas-laugh.md
+.changeset/small-olives-arrive.md
+.changeset/smart-ears-refuse.md
+.changeset/smart-geckos-cover.md
+.changeset/smooth-papayas-boil.md
+.changeset/smooth-poems-bake.md
+.changeset/spotty-bees-destroy.md
+.changeset/stupid-ghosts-help.md
+.changeset/swift-dancers-rest.md
+.changeset/swift-peas-film.md
+.changeset/thin-vans-applaud.md
+.changeset/thirty-baboons-punch.md
+.changeset/three-baboons-bow.md
+.changeset/tidy-swans-repair.md
+.changeset/tidy-yaks-joke.md
+.changeset/tiny-buckets-love.md
+.changeset/tiny-candles-whisper.md
+.changeset/tiny-chairs-build.md
+.changeset/tricky-panthers-guess.md
+.changeset/twenty-goats-kneel.md
+.changeset/twenty-lies-switch.md
+.changeset/twenty-planets-repeat.md
+.changeset/violet-melons-itch.md
+.changeset/violet-zebras-cry.md
+.changeset/wise-spiders-jog.md
+.changeset/witty-kids-talk.md
+.changeset/yellow-mails-cheat.md
+.changeset/young-timers-grow.md

.prettierrc

@@ -1,4 +1,3 @@
 {
-  "singleQuote": true,
   "trailingComma": "all"
 }

CONTRIBUTING.md

@@ -31,6 +31,7 @@ clear and has sufficient instructions to be able to reproduce the issue.
 - Run a cobrowsing/mirroring session locally: `yarn live-stream`
 - Test: `yarn test` or `yarn test:watch`
 - Lint: `yarn lint`
+- Rewrite files with prettier: `yarn format` or `yarn format:head`
 
 ## Coding style
 

docs/development/coding-style.md

@@ -1,6 +1,6 @@
 # Coding Style
 
-These are the style guidelines for coding in Electron.
+These have been adapted from the style guidelines for coding in Electron.
 
 You can run `yarn lint` to show any style issues detected by `eslint`.
 
@@ -9,6 +9,8 @@ You can run `yarn lint` to show any style issues detected by `eslint`.
 - End files with a newline.
 - Using a plain `return` when returning explicitly at the end of a function.
   - Not `return null`, `return undefined`, `null` or `undefined`
+- run `yarn format` to rewrite all files in the standard format
+- run `yarn format:head` to rewrite files from your last commit
 
 ## Documentation
 

package.json

@@ -46,6 +46,7 @@
     "test:watch": "yarn turbo run test:watch",
     "test:update": "yarn turbo run test:update",
     "format": "yarn prettier --write '**/*.{ts,md}'",
+    "format:head": "git diff --name-only HEAD^ |grep '\\.ts$\\|\\.md$' |xargs yarn prettier --write",
     "dev": "yarn turbo run dev",
     "repl": "cd packages/rrweb && npm run repl",
     "typings": "yarn turbo run typings",

packages/rrweb-snapshot/src/css.ts

@@ -893,7 +893,17 @@ export function parse(css: string, options: ParserOptions = {}) {
    */
 
   function _compileAtrule(name: string) {
-    const re = new RegExp('^@' + name + '\\s*([^;]+);');
+    const re = new RegExp(
+      '^@' +
+        name +
+        '\\s*((?:' +
+        [
+          '(?<!\\\\)"(?:\\\\"|[^"])*"',
+          "(?<!\\\\)'(?:\\\\'|[^'])*'",
+          '[^;]',
+        ].join('|') +
+        ')+);',
+    );
     return () => {
       const pos = position();
       const m = match(re);

packages/rrweb-snapshot/src/snapshot.ts

@@ -200,23 +200,33 @@
   return output.join(', ');
 }
 
+const cachedDocument = new WeakMap<Document, HTMLAnchorElement>();
+
 export function absoluteToDoc(doc: Document, attributeValue: string): string {
   if (!attributeValue || attributeValue.trim() === '') {
     return attributeValue;
   }
-  const a: HTMLAnchorElement = doc.createElement('a');
-  a.href = attributeValue;
-  return a.href;
+
+  return getHref(doc, attributeValue);
 }
 
 function isSVGElement(el: Element): boolean {
   return Boolean(el.tagName === 'svg' || (el as SVGElement).ownerSVGElement);
 }
 
-function getHref() {
-  // return a href without hash
-  const a = document.createElement('a');
-  a.href = '';
+function getHref(doc: Document, customHref?: string) {
+  let a = cachedDocument.get(doc);
+  if (!a) {
+    a = doc.createElement('a');
+    cachedDocument.set(doc, a);
+  }
+  if (!customHref) {
+    customHref = '';
+  } else if (customHref.startsWith('blob:') || customHref.startsWith('data:')) {
+    return customHref;
+  }
+  // note: using `new URL` is slower. See #1434 or https://jsbench.me/uqlud17rxo/1
+  a.setAttribute('href', customHref);
   return a.href;
 }
 
@@ -250,7 +260,7 @@
   } else if (name === 'srcset') {
     return getAbsoluteSrcsetString(doc, value);
   } else if (name === 'style') {
-    return absoluteToStylesheet(value, getHref());
+    return absoluteToStylesheet(value, getHref(doc));
   } else if (tagName === 'object' && name === 'data') {
     return absoluteToDoc(doc, value);
   }
@@ -266,7 +276,7 @@
 export function ignoreAttribute(
   tagName: string,
   name: string,
   _value: unknown,
 ): boolean {
   return (tagName === 'video' || tagName === 'audio') && name === 'autoplay';
 }
@@ -503,7 +513,7 @@
   iframeEl.addEventListener('load', listener);
 }
 
 function isStylesheetLoaded(link: HTMLLinkElement) {
   if (!link.getAttribute('href')) return true; // nothing to load
   return link.sheet !== null;
 }
@@ -635,6 +645,7 @@
       });
     case n.TEXT_NODE:
       return serializeTextNode(n as Text, {
+        doc,
         maskAllText,
         maskTextClass,
         unmaskTextClass,
@@ -671,6 +682,7 @@
 function serializeTextNode(
   n: Text,
   options: {
+    doc: Document;
     maskAllText: boolean;
     maskTextClass: string | RegExp;
     unmaskTextClass: string | RegExp | null;
@@ -710,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) {
@@ -719,7 +731,7 @@
         n,
       );
     }
-    textContent = absoluteToStylesheet(textContent, getHref());
+    textContent = absoluteToStylesheet(textContent, getHref(options.doc));
   }
   if (isScript) {
     textContent = 'SCRIPT_PLACEHOLDER';
@@ -817,7 +829,7 @@
     keepIframeSrcFn,
     newlyAddedElement = false,
     rootId,
     maskAllText,
     maskTextClass,
     unmaskTextClass,
     maskTextSelector,
@@ -859,7 +871,7 @@
     if (cssText) {
       delete attributes.rel;
       delete attributes.href;
       attributes._cssText = absoluteToStylesheet(cssText, stylesheet!.href!);
     }
   }
   // dynamic stylesheet
@@ -873,7 +885,7 @@
       (n as HTMLStyleElement).sheet as CSSStyleSheet,
     );
     if (cssText) {
-      attributes._cssText = absoluteToStylesheet(cssText, getHref());
+      attributes._cssText = absoluteToStylesheet(cssText, getHref(doc));
     }
   }
   // form fields
@@ -970,10 +982,10 @@
     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,
         );

packages/rrweb-snapshot/src/utils.ts

@@ -47,7 +47,7 @@
     !cssText.includes(' -webkit-background-clip: text;')
   ) {
     cssText = cssText.replace(
-      ' background-clip: text;',
+      /\sbackground-clip:\s*text;/g,
       ' -webkit-background-clip: text; background-clip: text;',
     );
   }
@@ -71,7 +71,7 @@
  * Browsers sometimes incorrectly escape `@import` on `.cssText` statements.
  * This function tries to correct the escaping.
  * more info: https://bugs.chromium.org/p/chromium/issues/detail?id=1472259
  * @param cssImportRule
  * @returns `cssText` with browser inconsistencies fixed, or null if not applicable.
  */
 export function escapeImportStatement(rule: CSSImportRule): string {

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

@@ -182,4 +182,25 @@ describe('rebuild', function () {
       expect(getDuration(cachedEnd) * factor).toBeLessThan(getDuration(end));
     });
   });
+
+  // sentry: skipped because we've removed `adaptCssForReplay` for now
+  // it('should not incorrectly interpret escaped quotes', () => {
+  //   // the ':hover' in the below is a decoy which is not part of the selector,
+  //   // previously that part was being incorrectly consumed by the selector regex
+  //   const should_not_modify =
+  //     ".tailwind :is(.before\\:content-\\[\\'\\'\\])::before { --tw-content: \":hover\"; content: var(--tw-content); }.tailwind :is(.\\[\\&\\>li\\]\\:before\\:content-\\[\\'-\\'\\] > li)::before { color: pink; }";
+  //   expect(adaptCssForReplay(should_not_modify, cache)).toEqual(
+  //     should_not_modify,
+  //   );
+  // });
+
+  // sentry: skipped because we've removed `adaptCssForReplay` for now
+  // it('should not incorrectly interpret at rules', () => {
+  //   // the ':hover' in the below is a decoy which is not part of the selector,
+  //   const should_not_modify =
+  //     '@import url("https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,400;0,500;0,700;1,400&display=:hover");';
+  //   expect(adaptCssForReplay(should_not_modify, cache)).toEqual(
+  //     should_not_modify,
+  //   );
+  // });
 });

packages/rrweb/src/index.ts

@@ -29,7 +29,6 @@ export { deserializeArg } from './replay/canvas/deserialize-args';
 export {
   CanvasManager,
   takeFullSnapshot,
-  mirror,
   freezePage,
   addCustomEvent,
 } from './record';

packages/rrweb/src/record/index.ts

@@ -82,8 +82,7 @@
   console.debug('Unable to override Array.from', err);
 }
 
-export const mirror = createMirror();
-
+const mirror = createMirror();
 function record<T = eventWithTime>(
   options: recordOptions<T> = {},
 ): listenerHandler | undefined {
@@ -620,7 +619,7 @@
             plugins
               ?.filter((p) => p.observer)
               ?.map((p) => ({
                 observer: p.observer!,
                 options: p.options,
                 callback: (payload: object) =>
                   wrappedEmit({
@@ -638,7 +637,7 @@
 
     iframeManager.addLoadListener((iframeEl) => {
       try {
         handlers.push(observe(iframeEl.contentDocument!));
       } catch (error) {
         // TODO: handle internal error
         console.warn(error);