Merge remote-tracking branch 'upstream/master' into fix-splitCssText-…

…again

.changeset/dirty-pets-fly.md

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

.changeset/fuzzy-mugs-march.md

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

.changeset/lucky-donuts-hammer.md

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

.changeset/shy-countries-rhyme.md

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

.changeset/textarea-inner-html.md

@@ -0,0 +1,5 @@
+---
+"rrweb": patch
+---
+
+#1596 Add masking for innerText mutations on textarea elements

.github/workflows/ci-cd.yml

@@ -19,6 +19,7 @@ jobs:
         uses: actions/setup-node@v3
         with:
           node-version: lts/*
+          cache: 'yarn'
 
       - name: Install Dependencies
         run: yarn install --frozen-lockfile
@@ -33,8 +34,16 @@ jobs:
         # run: PUPPETEER_EXECUTABLE_PATH=${{ steps.setup-chrome.outputs.chrome-path }} PUPPETEER_HEADLESS=true xvfb-run --server-args="-screen 0 1920x1080x24" yarn test
         run: PUPPETEER_HEADLESS=true xvfb-run --server-args="-screen 0 1920x1080x24" yarn test
 
+      - name: Check bundle sizes
+        uses: preactjs/compressed-size-action@v2
+        with:
+          install-script: "yarn install --frozen-lockfile"
+          build-script: "build:all"
+          compression: "none"
+          pattern: "**/dist/*.{js,cjs,mjs,css}"
+
       - name: Upload diff images to GitHub
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         if: failure()
         with:
           name: image-diff

.github/workflows/release.yml

@@ -19,6 +19,7 @@ jobs:
         uses: actions/setup-node@v3
         with:
           node-version: lts/*
+          cache: 'yarn'
 
       - name: Install Dependencies
         run: yarn install --frozen-lockfile

.github/workflows/style-check.yml

@@ -28,7 +28,7 @@ jobs:
         # Continue to the next step even if this fails
         continue-on-error: true
       - name: Upload ESLint Report
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           name: eslint_report.json
           path: eslint_report.json
@@ -40,7 +40,7 @@ jobs:
     runs-on: ubuntu-latest
     name: ESLint Annotation
     steps:
-      - uses: actions/download-artifact@v3
+      - uses: actions/download-artifact@v4
         with:
           name: eslint_report.json
       - name: Annotate Code Linting Results

.gitignore

@@ -35,3 +35,6 @@ dist
 # for vite
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
+
+# bundle analysis files
+*-bundle-analysis.html

package.json

@@ -38,6 +38,7 @@
     "markdownlint": "^0.25.1",
     "markdownlint-cli": "^0.31.1",
     "prettier": "2.8.4",
+    "rollup-plugin-visualizer": "^5.12.0",
     "turbo": "^2.0.4",
     "typescript": "^5.4.5"
   },

packages/rrweb/src/record/mutation.ts

@@ -533,10 +533,18 @@ export default class MutationBuffer {
       this.attributes.push(item);
       this.attributeMap.set(textarea, item);
     }
-    item.attributes.value = Array.from(
+    const value = Array.from(
       dom.childNodes(textarea),
       (cn) => dom.textContent(cn) || '',
     ).join('');
+    item.attributes.value = maskInputValue({
+      element: textarea,
+      maskInputOptions: this.maskInputOptions,
+      tagName: textarea.tagName,
+      type: getInputType(textarea),
+      value,
+      maskInputFn: this.maskInputFn,
+    });
   };
 
   private processMutation = (m: mutationRecord) => {

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

@@ -9964,6 +9964,21 @@ exports[`record integration tests > should not record input values if dynamicall
         {
           \\"parentId\\": 14,
           \\"nextId\\": 16,
+          \\"node\\": {
+            \\"type\\": 2,
+            \\"tagName\\": \\"textarea\\",
+            \\"attributes\\": {
+              \\"id\\": \\"textarea\\",
+              \\"size\\": \\"50\\",
+              \\"value\\": \\"*************************\\"
+            },
+            \\"childNodes\\": [],
+            \\"id\\": 21
+          }
+        },
+        {
+          \\"parentId\\": 14,
+          \\"nextId\\": 21,
           \\"node\\": {
             \\"type\\": 2,
             \\"tagName\\": \\"input\\",
@@ -9973,7 +9988,7 @@ exports[`record integration tests > should not record input values if dynamicall
               \\"value\\": \\"**********************\\"
             },
             \\"childNodes\\": [],
-            \\"id\\": 21
+            \\"id\\": 22
           }
         }
       ]
@@ -9985,6 +10000,15 @@ exports[`record integration tests > should not record input values if dynamicall
       \\"source\\": 5,
       \\"text\\": \\"**********************\\",
       \\"isChecked\\": false,
+      \\"id\\": 22
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"*************************\\",
+      \\"isChecked\\": false,
       \\"id\\": 21
     }
   },
@@ -9993,7 +10017,7 @@ exports[`record integration tests > should not record input values if dynamicall
     \\"data\\": {
       \\"source\\": 2,
       \\"type\\": 5,
-      \\"id\\": 21
+      \\"id\\": 22
     }
   },
   {
@@ -10002,7 +10026,7 @@ exports[`record integration tests > should not record input values if dynamicall
       \\"source\\": 5,
       \\"text\\": \\"***********************\\",
       \\"isChecked\\": false,
-      \\"id\\": 21
+      \\"id\\": 22
     }
   },
   {
@@ -10011,7 +10035,7 @@ exports[`record integration tests > should not record input values if dynamicall
       \\"source\\": 5,
       \\"text\\": \\"************************\\",
       \\"isChecked\\": false,
-      \\"id\\": 21
+      \\"id\\": 22
     }
   },
   {
@@ -10020,8 +10044,109 @@ exports[`record integration tests > should not record input values if dynamicall
       \\"source\\": 5,
       \\"text\\": \\"*************************\\",
       \\"isChecked\\": false,
+      \\"id\\": 22
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 2,
+      \\"type\\": 6,
+      \\"id\\": 22
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 2,
+      \\"type\\": 5,
+      \\"id\\": 21
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"**************************\\",
+      \\"isChecked\\": false,
+      \\"id\\": 21
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"***************************\\",
+      \\"isChecked\\": false,
       \\"id\\": 21
     }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"****************************\\",
+      \\"isChecked\\": false,
+      \\"id\\": 21
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"**********************************************\\",
+      \\"isChecked\\": false,
+      \\"id\\": 22
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"*************************************************\\",
+      \\"isChecked\\": false,
+      \\"id\\": 21
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 0,
+      \\"texts\\": [],
+      \\"attributes\\": [
+        {
+          \\"id\\": 22,
+          \\"attributes\\": {
+            \\"value\\": \\"**********************************************************************************************\\"
+          }
+        },
+        {
+          \\"id\\": 21,
+          \\"attributes\\": {
+            \\"value\\": \\"*************************************************************************************************\\"
+          }
+        }
+      ],
+      \\"removes\\": [],
+      \\"adds\\": []
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 0,
+      \\"texts\\": [],
+      \\"attributes\\": [
+        {
+          \\"id\\": 21,
+          \\"attributes\\": {
+            \\"value\\": \\"****************************************************************\\"
+          }
+        }
+      ],
+      \\"removes\\": [],
+      \\"adds\\": []
+    }
   }
 ]"
 `;

packages/rrweb/test/integration.test.ts

@@ -783,9 +783,46 @@ describe('record integration tests', function (this: ISuite) {
 
       const nextElement = document.querySelector('#one')!;
       nextElement.parentNode!.insertBefore(el, nextElement);
+
+      const ta = document.createElement('textarea');
+      ta.size = 50;
+      ta.id = 'textarea';
+      ta.setAttribute('size', '50');
+      ta.value = 'textarea should be masked';
+
+      nextElement.parentNode!.insertBefore(ta, nextElement);
     });
 
     await page.type('#input', 'moo');
+    await page.type('#textarea', 'boo');
+
+    await page.evaluate(() => {
+      const el = document.querySelector('input');
+      el.value = 'input attribute mutation should also be masked';
+
+      const ta = document.querySelector('textarea');
+      ta.value = 'textarea attribute mutation should also be masked';
+    });
+
+    await page.evaluate(() => {
+      const el = document.querySelector('input');
+      el.setAttribute(
+        'value',
+        "input attribute mutation should also be masked (even though the new value doesn't take effect)",
+      );
+
+      const ta = document.querySelector('textarea');
+      ta.setAttribute(
+        'value',
+        "textarea attribute mutation should also be masked (even though the new value doesn't take effect)",
+      );
+    });
+
+    await page.evaluate(() => {
+      const ta = document.querySelector('textarea');
+      ta.innerText =
+        'textarea attribute mutation via innerText should also be masked ';
+    });
 
     await assertSnapshot(page);
   });

packages/rrweb/test/record/cross-origin-iframes.test.ts

@@ -54,7 +54,7 @@ async function injectRecordScript(
     // we get this error: `Protocol error (DOM.resolveNode): Node with given id does not belong to the document`
     // then the page wasn't loaded yet and we try again
     if (
-      !e.message.includes('DOM.resolveNode') ||
+      !e.message.includes('DOM.resolveNode') &&
       !e.message.includes('DOM.describeNode')
     )
       throw e;

vite.config.default.ts

@@ -5,6 +5,8 @@ import { defineConfig, LibraryOptions, LibraryFormats, Plugin } from 'vite';
 import { build, Format } from 'esbuild';
 import { resolve } from 'path';
 import { umdWrapper } from 'esbuild-plugin-umd-wrapper';
+import * as fs from 'node:fs';
+import { visualizer } from 'rollup-plugin-visualizer';
 
 // don't empty out dir if --watch flag is passed
 const emptyOutDir = !process.argv.includes('--watch');
@@ -161,6 +163,10 @@ export default function (
         },
       }),
       minifyAndUMDPlugin({ name, outDir }),
+      visualizer({
+        filename: resolve(__dirname, name + '-bundle-analysis.html'), // Path for the HTML report
+        open: false, // don't Automatically open the report in the browser
+      }),
       {
         name: 'remove-worker-inline',
         enforce: 'pre',