Apply formatting changes

rrweb-io · Apr 5, 2024 · 3ea2885 · 3ea2885
1 parent 1ec0ab7
commit 3ea2885
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 19 deletions.
diff --git a/packages/rrweb-snapshot/src/rebuild.ts b/packages/rrweb-snapshot/src/rebuild.ts
@@ -227,9 +227,13 @@ function buildNode(
           value = adaptCssForReplay(value, cache);
         }
         if ((isTextarea || isRemoteOrDynamicCss) && typeof value === 'string') {
-          if (isRemoteOrDynamicCss && n.childNodes.length && n.childNodes[0].type === NodeType.Text) {
+          if (
+            isRemoteOrDynamicCss &&
+            n.childNodes.length &&
+            n.childNodes[0].type === NodeType.Text
+          ) {
             n.childNodes[0].textContent = value;
-            continue
+            continue;
           }
           node.appendChild(doc.createTextNode(value));
           // https://github.com/rrweb-io/rrweb/issues/112

diff --git a/packages/rrweb-snapshot/src/snapshot.ts b/packages/rrweb-snapshot/src/snapshot.ts
@@ -541,7 +541,7 @@ function serializeTextNode(
     needsMask: boolean | undefined;
     maskTextFn: MaskTextFn | undefined;
     rootId: number | undefined;
-    blankTextNodes? : boolean;
+    blankTextNodes?: boolean;
   },
 ): serializedNode {
   const { needsMask, maskTextFn, rootId, blankTextNodes } = options;
@@ -569,7 +569,9 @@ function serializeTextNode(
           );
         } catch (err) {
           console.warn(
-            `Cannot get CSS styles from text's parentNode. Error: ${err as string}`,
+            `Cannot get CSS styles from text's parentNode. Error: ${
+              err as string
+            }`,
             n,
           );
         }
@@ -654,10 +656,7 @@ function serializeElementNode(
       attributes._cssText = absoluteToStylesheet(cssText, stylesheet!.href!);
     }
   }
-  if (
-    tagName === 'style' &&
-    (n as HTMLStyleElement).sheet
-  ) {
+  if (tagName === 'style' && (n as HTMLStyleElement).sheet) {
     const cssText = stringifyStylesheet(
       (n as HTMLStyleElement).sheet as CSSStyleSheet,
     );
@@ -954,7 +953,7 @@ export function serializeNodeWithId(
       node: serializedElementNodeWithId,
     ) => unknown;
     stylesheetLoadTimeout?: number;
-    blankTextNodes? : boolean;
+    blankTextNodes?: boolean;
   },
 ): serializedNodeWithId | null {
   const {
@@ -1106,7 +1105,7 @@ export function serializeNodeWithId(
     } else {
       if (
         serializedNode.type === NodeType.Element &&
-          (serializedNode as elementNode).attributes._cssText !== undefined
+        (serializedNode as elementNode).attributes._cssText !== undefined
       ) {
         bypassOptions.blankTextNodes = true;
       }

diff --git a/packages/rrweb-snapshot/test/snapshot.test.ts b/packages/rrweb-snapshot/test/snapshot.test.ts
@@ -172,13 +172,14 @@ describe('style elements', () => {
 
   it('should serialize all rules on stylesheets with mix of insertion type', () => {
     const styleEl = render(`<style>body { color: red; }</style>`);
-    styleEl.sheet?.insertRule('section.lost { color: unseeable; }');  // browser throws this away after append
+    styleEl.sheet?.insertRule('section.lost { color: unseeable; }'); // browser throws this away after append
     styleEl.append(document.createTextNode('section { color: blue; }'));
     styleEl.sheet?.insertRule('section.working { color: pink; }');
     expect(serializeNode(styleEl)).toMatchObject({
       rootId: undefined,
       attributes: {
-        _cssText: 'section.working {color: pink;}body {color: red;}section {color: blue;}',
+        _cssText:
+          'section.working {color: pink;}body {color: red;}section {color: blue;}',
       },
       type: 2,
     });

diff --git a/packages/rrweb/test/integration.test.ts b/packages/rrweb/test/integration.test.ts
@@ -180,15 +180,21 @@ describe('record integration tests', function (this: ISuite) {
     await page.evaluate(() => {
       let styleEl = document.querySelector('style');
       if (styleEl) {
-        styleEl.append(document.createTextNode('body { background-color: darkgreen; }'));
-        styleEl.append(document.createTextNode('.absolutify { background-image: url("./rel"); }'));
+        styleEl.append(
+          document.createTextNode('body { background-color: darkgreen; }'),
+        );
+        styleEl.append(
+          document.createTextNode(
+            '.absolutify { background-image: url("./rel"); }',
+          ),
+        );
       }
     });
 
     await page.evaluate(() => {
       let styleEl = document.querySelector('style');
       if (styleEl) {
-        styleEl.childNodes.forEach((cn)=>{
+        styleEl.childNodes.forEach((cn) => {
           if (cn.textContent) {
             cn.textContent = cn.textContent.replace('darkgreen', 'purple');
           }
@@ -199,9 +205,12 @@ describe('record integration tests', function (this: ISuite) {
     await page.evaluate(() => {
       let styleEl = document.querySelector('style');
       if (styleEl) {
-        styleEl.childNodes.forEach((cn)=>{
+        styleEl.childNodes.forEach((cn) => {
           if (cn.textContent) {
-            cn.textContent = cn.textContent.replace('black', 'black !important');
+            cn.textContent = cn.textContent.replace(
+              'black',
+              'black !important',
+            );
           }
         });
       }
@@ -231,8 +240,6 @@ describe('record integration tests', function (this: ISuite) {
       'rgb(128, 0, 128)', // purple
       'rgb(0, 0, 0)', // black !important
     ]);
-
-
   });
 
   it('can record childList mutations', async () => {