Merge branch 'master' into @juice10/vite

.changeset/curvy-balloons-brake.md

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

.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/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

.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

@@ -24,6 +24,9 @@ dist
 .cache/*
 !.gitkeep
 
+# 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

@@ -33,6 +33,7 @@ clear and has sufficient instructions to be able to reproduce the issue.
 - Build individual packages: `yarn build` or `yarn dev`
 - 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

@@ -44,6 +44,7 @@
     "test:update": "yarn turbo run test:update",
     "check-types": "yarn turbo run check-types --continue",
     "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);
   }
@@ -502,6 +512,7 @@ function serializeNode(
       });
     case n.TEXT_NODE:
       return serializeTextNode(n as Text, {
+        doc,
         needsMask,
         maskTextFn,
         rootId,
@@ -532,6 +543,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;
@@ -563,7 +575,7 @@ function serializeTextNode(
         n,
       );
     }
-    textContent = absoluteToStylesheet(textContent, getHref());
+    textContent = absoluteToStylesheet(textContent, getHref(options.doc));
   }
   if (isScript) {
     textContent = 'SCRIPT_PLACEHOLDER';
@@ -657,7 +669,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/test/__snapshots__/integration.test.ts.snap

@@ -1716,29 +1716,34 @@ exports[`record integration tests > can record clicks 1`] = `
                     \\"childNodes\\": [
                       {
                         \\"type\\": 3,
-                        \\"textContent\\": \\"link\\\\n  \\\\n    \\",
+                        \\"textContent\\": \\"link\\",
                         \\"id\\": 22
-                      },
-                      {
-                        \\"type\\": 2,
-                        \\"tagName\\": \\"script\\",
-                        \\"attributes\\": {},
-                        \\"childNodes\\": [
-                          {
-                            \\"type\\": 3,
-                            \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
-                            \\"id\\": 24
-                          }
-                        ],
-                        \\"id\\": 23
-                      },
+                      }
+                    ],
+                    \\"id\\": 21
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n  \\\\n    \\",
+                    \\"id\\": 23
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"script\\",
+                    \\"attributes\\": {},
+                    \\"childNodes\\": [
                       {
                         \\"type\\": 3,
-                        \\"textContent\\": \\"\\\\n    \\\\n    \\\\n\\\\n\\",
+                        \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
                         \\"id\\": 25
                       }
                     ],
-                    \\"id\\": 21
+                    \\"id\\": 24
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n    \\\\n    \\\\n\\\\n\\",
+                    \\"id\\": 26
                   }
                 ],
                 \\"id\\": 16
@@ -15003,7 +15008,7 @@ exports[`record integration tests > should record shadow DOM 1`] = `
                   },
                   {
                     \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n    \\\\n  \\\\n    \\",
+                    \\"textContent\\": \\"\\\\n  \\\\n    \\",
                     \\"id\\": 39
                   },
                   {

packages/rrweb/test/html/link.html

@@ -9,6 +9,6 @@
 
   <body>
     <span id="not-a-link">not link</span>
-    <a href="about:blank#clicked">link</span>
+    <a href="about:blank#clicked">link</a>
   </body>
 </html>

packages/rrweb/test/html/shadow-dom.html

@@ -78,6 +78,5 @@
         });
       }
     </script>
-    </script>
   </body>
 </html>

packages/rrweb/test/integration.test.ts

@@ -113,17 +113,19 @@ describe('record integration tests', function (this: ISuite) {
       ta.innerText = 'pre value';
       document.body.append(ta);
     });
+    await page.waitForTimeout(5);
     await page.evaluate(() => {
       const t = document.querySelector('textarea') as HTMLTextAreaElement;
       t.innerText = 'ok'; // this mutation should be recorded
     });
+    await page.waitForTimeout(5);
     await page.evaluate(() => {
       const t = document.querySelector('textarea') as HTMLTextAreaElement;
       (t.childNodes[0] as Text).appendData('3'); // this mutation is also valid
     });
-
+    await page.waitForTimeout(5);
     await page.type('textarea', '1'); // types (inserts) at index 0, in front of existing text
-
+    await page.waitForTimeout(5);
     await page.evaluate(() => {
       const t = document.querySelector('textarea') as HTMLTextAreaElement;
       // user has typed so childNode content should now be ignored
@@ -134,7 +136,7 @@ describe('record integration tests', function (this: ISuite) {
       // there is nothing explicit in rrweb which enforces this, but this test may protect against
       // a future change where a mutation on a textarea incorrectly updates the .value
     });
-
+    await page.waitForTimeout(5);
     await page.type('textarea', '2'); // cursor is at index 1
 
     const snapshots = (await page.evaluate(