Merge pull request #23 from amplitude/rrweb-sync-alpha-13

rrweb sync alpha 14

.changeset/curvy-balloons-brake.md

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

.changeset/eleven-bobcats-peel.md

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

.changeset/event-single-wrap.md

@@ -0,0 +1,5 @@
+---
+'@amplitude/rrweb': patch
+---
+
+perf: Avoid an extra function call and object clone during event emission

.changeset/fair-ducks-clean.md

@@ -1,5 +1,5 @@
 ---
-'@amplitude/rrweb': patch
+"@amplitude/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 @@
+---
+"@amplitude/rrweb-snapshot": patch
+"@amplitude/rrweb": patch
+---
+
+Fixup for multiple background-clip replacement

.changeset/format-head-prettier.md

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

.changeset/four-gifts-march.md

@@ -1,5 +1,5 @@
 ---
-'@amplitude/rrweb': patch
+"@amplitude/rrweb": patch
 ---
 
 fix(rrweb): external function errors should be tagged

.changeset/good-moles-tickle.md

@@ -1,5 +1,5 @@
 ---
-'@amplitude/rrweb': patch
+"@amplitude/rrweb": patch
 ---
 
 Change package names

.changeset/hungry-dodos-taste.md

@@ -0,0 +1,10 @@
+---
+'@amplitude/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/kind-queens-breathe.md

@@ -1,5 +1,5 @@
 ---
-'@amplitude/rrweb': patch
+"@amplitude/rrweb": patch
 ---
 
 Adding null check to tag name

.changeset/nervous-kiwis-nail.md

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

.changeset/no-neg-lookbehind.md

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

.changeset/octopus-orange.md

@@ -1,5 +1,5 @@
 ---
-'@amplitude/rrweb': patch
+"@amplitude/rrweb": patch
 ---
 
 feat: skip through inactive periods instead of fast forward

.changeset/popular-spies-fetch.md

@@ -1,5 +1,5 @@
 ---
-'@amplitude/rrweb': patch
+"@amplitude/rrweb": patch
 ---
 
 perf: only call createHTMLDocument when it is needed

.changeset/short-masks-cross.md

@@ -1,5 +1,5 @@
 ---
-'@amplitude/rrweb': patch
+"@amplitude/rrweb": patch
 ---
 
 fix(rrweb-snapshot): pass maskInputFn correctly

.changeset/silent-plants-perform.md

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

.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

@@ -41,6 +41,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",
     "live-stream": "cd packages/rrweb && yarn live-stream",

packages/rrweb-snapshot/src/snapshot.ts

@@ -196,23 +196,33 @@ function getAbsoluteSrcsetString(doc: Document, attributeValue: string) {
   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;
 }
 
@@ -244,7 +254,7 @@ export function transformAttribute(
   } 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);
   }
@@ -506,6 +516,7 @@ function serializeNode(
       });
     case n.TEXT_NODE:
       return serializeTextNode(n as Text, {
+        doc,
         needsMask,
         maskTextFn,
         rootId,
@@ -536,6 +547,7 @@ function getRootId(doc: Document, mirror: Mirror): number | undefined {
 function serializeTextNode(
   n: Text,
   options: {
+    doc: Document;
     needsMask: boolean | undefined;
     maskTextFn: MaskTextFn | undefined;
     rootId: number | undefined;
@@ -567,7 +579,7 @@ function serializeTextNode(
         n,
       );
     }
-    textContent = absoluteToStylesheet(textContent, getHref());
+    textContent = absoluteToStylesheet(textContent, getHref(options.doc));
   }
   if (isScript) {
     textContent = 'SCRIPT_PLACEHOLDER';
@@ -661,7 +673,7 @@ function serializeElementNode(
       (n as HTMLStyleElement).sheet as CSSStyleSheet,
     );
     if (cssText) {
-      attributes._cssText = absoluteToStylesheet(cssText, getHref());
+      attributes._cssText = absoluteToStylesheet(cssText, getHref(doc));
     }
   }
   // form fields

packages/rrweb-snapshot/src/utils.ts

@@ -47,7 +47,7 @@ function fixBrowserCompatibilityIssuesInCSS(cssText: string): string {
     !cssText.includes(' -webkit-background-clip: text;')
   ) {
     cssText = cssText.replace(
-      ' background-clip: text;',
+      /\sbackground-clip:\s*text;/g,
       ' -webkit-background-clip: text; background-clip: text;',
     );
   }

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

@@ -364,6 +364,12 @@ exports[`integration tests [html file]: picture-in-frame.html 1`] = `
   </body></html>"
 `;
 
+exports[`integration tests [html file]: picture-with-inline-onload.html 1`] = `
+"<html xmlns=\\"http://www.w3.org/1999/xhtml\\"><head></head><body>
+    <img src=\\"http://localhost:3030/images/robot.png\\" alt=\\"This is a robot\\" style=\\"opacity: 1;\\" _onload=\\"this.style.opacity=1\\" />
+  </body></html>"
+`;
+
 exports[`integration tests [html file]: preload.html 1`] = `
 "<!DOCTYPE html><html lang=\\"en\\"><head>
     <meta charset=\\"UTF-8\\" />