ref: sort options obj and remove optional params

.changeset/healthy-brooms-glow.md

@@ -0,0 +1,6 @@
+---
+"rrweb-snapshot": major
+"rrweb": major
+---
+
+change optional params of serialize object

packages/rrweb-snapshot/src/utils.ts

@@ -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 {
@@ -221,7 +221,7 @@
   maskInputFn,
 }: {
   element: HTMLElement;
-  maskInputOptions: MaskInputOptions;
+  maskInputOptions: MaskInputOptions | undefined;
   tagName: string;
   type: string | null;
   value: string | null;
@@ -231,8 +231,9 @@
   const actualType = type && toLowerCase(type);
 
   if (
-    maskInputOptions[tagName.toLowerCase() as keyof MaskInputOptions] ||
-    (actualType && maskInputOptions[actualType as keyof MaskInputOptions])
+    maskInputOptions &&
+    (maskInputOptions[tagName.toLowerCase() as keyof MaskInputOptions] ||
+      (actualType && maskInputOptions[actualType as keyof MaskInputOptions]))
   ) {
     if (maskInputFn) {
       text = maskInputFn(text, element);

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

@@ -138,7 +138,7 @@ describe('integration tests', function (this: ISuite) {
       const rebuildHtml = (
         (await page.evaluate(`${code}
         const x = new XMLSerializer();
-        const snap = rrwebSnapshot.snapshot(document);
+        const snap = rrwebSnapshot.snapshot(document, {});
         let out = x.serializeToString(rrwebSnapshot.rebuild(snap, { doc: document }));
         if (document.querySelector('html').getAttribute('xmlns') !== 'http://www.w3.org/1999/xhtml') {
           // this is just an artefact of serializeToString
@@ -180,7 +180,7 @@ describe('integration tests', function (this: ISuite) {
       `pre-check: images will be rendered ~326px high in BackCompat mode, and ~588px in CSS1Compat mode; getting: ${renderedHeight}px`,
     );
     const rebuildRenderedHeight = await page.evaluate(`${code}
-const snap = rrwebSnapshot.snapshot(document);
+const snap = rrwebSnapshot.snapshot(document, {});
 const iframe = document.createElement('iframe');
 iframe.setAttribute('width', document.body.clientWidth)
 iframe.setAttribute('height', document.body.clientHeight)
@@ -422,7 +422,7 @@ describe('iframe integration tests', function (this: ISuite) {
     });
     const snapshotResult = JSON.stringify(
       await page.evaluate(`${code};
-      rrwebSnapshot.snapshot(document);
+      rrwebSnapshot.snapshot(document, {});
     `),
       null,
       2,
@@ -465,7 +465,7 @@ describe('shadow DOM integration tests', function (this: ISuite) {
     });
     const snapshotResult = JSON.stringify(
       await page.evaluate(`${code};
-      rrwebSnapshot.snapshot(document);
+      rrwebSnapshot.snapshot(document, {});
     `),
       null,
       2,

packages/rrweb/src/record/index.ts

@@ -375,19 +375,19 @@
 
     mutationBuffers.forEach((buf) => buf.lock()); // don't allow any mirror modifications during snapshotting
     const node = snapshot(document, {
-      mirror,
       blockClass,
       blockSelector,
-      maskTextClass,
-      maskTextSelector,
+      dataURLOptions,
+      inlineImages,
       inlineStylesheet,
       maskAllInputs: maskInputOptions,
-      maskTextFn,
       maskInputFn,
-      slimDOM: slimDOMOptions,
-      dataURLOptions,
+      maskTextClass,
+      maskTextFn,
+      maskTextSelector,
+      mirror,
       recordCanvas,
-      inlineImages,
+      slimDOM: slimDOMOptions,
       onSerialize: (n) => {
         if (isSerializedIframe(n, mirror)) {
           iframeManager.addIframe(n as HTMLIFrameElement);
@@ -555,7 +555,7 @@
             plugins
               ?.filter((p) => p.observer)
               ?.map((p) => ({
                 observer: p.observer!,
                 options: p.options,
                 callback: (payload: object) =>
                   wrappedEmit({
@@ -573,7 +573,7 @@
 
     iframeManager.addLoadListener((iframeEl) => {
       try {
         handlers.push(observe(iframeEl.contentDocument!));
       } catch (error) {
         // TODO: handle internal error
         console.warn(error);

packages/rrweb/src/record/mutation.ts

@@ -300,22 +300,27 @@
         return addList.addNode(n);
       }
       const sn = serializeNodeWithId(n, {
-        doc: this.doc,
-        mirror: this.mirror,
         blockClass: this.blockClass,
         blockSelector: this.blockSelector,
-        maskTextClass: this.maskTextClass,
-        maskTextSelector: this.maskTextSelector,
-        skipChild: true,
-        newlyAddedElement: true,
+        dataURLOptions: this.dataURLOptions,
+        doc: this.doc,
+        iframeLoadTimeout: undefined,
+        inlineImages: this.inlineImages,
         inlineStylesheet: this.inlineStylesheet,
+        keepIframeSrcFn: undefined,
+        maskInputFn: this.maskInputFn,
         maskInputOptions: this.maskInputOptions,
+        maskTextClass: this.maskTextClass,
         maskTextFn: this.maskTextFn,
-        maskInputFn: this.maskInputFn,
-        slimDOMOptions: this.slimDOMOptions,
-        dataURLOptions: this.dataURLOptions,
+        maskTextSelector: this.maskTextSelector,
+        mirror: this.mirror,
+        needsMask: undefined,
+        newlyAddedElement: true,
+        preserveWhiteSpace: undefined,
         recordCanvas: this.recordCanvas,
-        inlineImages: this.inlineImages,
+        skipChild: true,
+        slimDOMOptions: this.slimDOMOptions,
+        stylesheetLoadTimeout: undefined,
         onSerialize: (currentN) => {
           if (isSerializedIframe(currentN, this.mirror)) {
             this.iframeManager.addIframe(currentN as HTMLIFrameElement);
@@ -348,13 +353,13 @@
     };
 
     while (this.mapRemoves.length) {
       this.mirror.removeNodeFromMap(this.mapRemoves.shift()!);
     }
 
     for (const n of this.movedSet) {
       if (
         isParentRemoved(this.removes, n, this.mirror) &&
         !this.movedSet.has(n.parentNode!)
       ) {
         continue;
       }