Slim dom defaults refactor

.changeset/slimdom-defaults-refactor.md

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

packages/rrweb-snapshot/src/index.ts

@@ -2,6 +2,7 @@ import snapshot, {
   serializeNodeWithId,
   transformAttribute,
   ignoreAttribute,
+  slimDOMDefaults,
   visitSnapshot,
   cleanupSnapshot,
   needMaskingText,
@@ -26,6 +27,7 @@ export {
   createCache,
   transformAttribute,
   ignoreAttribute,
+  slimDOMDefaults,
   visitSnapshot,
   cleanupSnapshot,
   needMaskingText,

packages/rrweb-snapshot/src/snapshot.ts

@@ -190,10 +190,7 @@
   } else if (name === 'xlink:href' && value[0] !== '#') {
     // xlink:href starts with # is an id pointer
     return absoluteToDoc(doc, value);
-  } else if (
-    name === 'background' &&
-    (tagName === 'table' || tagName === 'td' || tagName === 'th')
-  ) {
+  } else if (name === 'background' && ['table', 'td', 'th'].includes(tagName)) {
     return absoluteToDoc(doc, value);
   } else if (name === 'srcset') {
     return getAbsoluteSrcsetString(doc, value);
@@ -212,7 +209,7 @@
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   _value: unknown,
 ): boolean {
-  return (tagName === 'video' || tagName === 'audio') && name === 'autoplay';
+  return ['video', 'audio'].includes(tagName) && name === 'autoplay';
 }
 
 export function _isBlockedElement(
@@ -282,7 +279,7 @@
     // should warn? maybe a text node isn't attached to a parent node yet?
     return false;
   } else {
     el = dom.parentElement(node)!;
   }
   try {
     if (typeof maskTextClass === 'string') {
@@ -616,7 +613,7 @@
     }
   }
   // form fields
-  if (tagName === 'input' || tagName === 'textarea' || tagName === 'select') {
+  if (['input', 'textarea', 'select'].includes(tagName)) {
     const value = (n as HTMLInputElement | HTMLTextAreaElement).value;
     const checked = (n as HTMLInputElement).checked;
     if (
@@ -702,10 +699,10 @@
     const recordInlineImage = () => {
       image.removeEventListener('load', recordInlineImage);
       try {
         canvasService!.width = image.naturalWidth;
         canvasService!.height = image.naturalHeight;
         canvasCtx!.drawImage(image, 0, 0);
         attributes.rr_dataURL = canvasService!.toDataURL(
           dataURLOptions.type,
           dataURLOptions.quality,
         );
@@ -733,7 +730,7 @@
     else image.addEventListener('load', recordInlineImage);
   }
   // media elements
-  if (tagName === 'audio' || tagName === 'video') {
+  if (['audio', 'video'].includes(tagName)) {
     const mediaAttributes = attributes as mediaAttributes;
     mediaAttributes.rr_mediaState = (n as HTMLMediaElement).paused
       ? 'paused'
@@ -805,6 +802,32 @@
   }
 }
 
+export function slimDOMDefaults(
+  _slimDOMOptions: SlimDOMOptions | 'all' | true | false | undefined,
+) {
+  if (_slimDOMOptions === true || _slimDOMOptions === 'all') {
+    // if true: set of sensible options that should not throw away any information
+    return {
+      script: true,
+      comment: true,
+      headFavicon: true,
+      headWhitespace: true,
+      headMetaSocial: true,
+      headMetaRobots: true,
+      headMetaHttpEquiv: true,
+      headMetaVerification: true,
+      // the following are off for slimDOMOptions === true,
+      // as they destroy some (hidden) info:
+      headMetaAuthorship: _slimDOMOptions === 'all',
+      headMetaDescKeywords: _slimDOMOptions === 'all',
+      headTitleMutations: _slimDOMOptions === 'all',
+    };
+  } else if (_slimDOMOptions) {
+    return _slimDOMOptions;
+  }
+  return {};
+}
+
 function slimDOMExcluded(
   sn: serializedNode,
   slimDOMOptions: SlimDOMOptions,
@@ -1289,24 +1312,8 @@
           password: true,
         }
       : maskAllInputs;
-  const slimDOMOptions: SlimDOMOptions =
-    slimDOM === true || slimDOM === 'all'
-      ? // if true: set of sensible options that should not throw away any information
-        {
-          script: true,
-          comment: true,
-          headFavicon: true,
-          headWhitespace: true,
-          headMetaDescKeywords: slimDOM === 'all', // destructive
-          headMetaSocial: true,
-          headMetaRobots: true,
-          headMetaHttpEquiv: true,
-          headMetaAuthorship: true,
-          headMetaVerification: true,
-        }
-      : slimDOM === false
-      ? {}
-      : slimDOM;
+  const slimDOMOptions = slimDOMDefaults(slimDOM);
+
   return serializeNodeWithId(n, {
     doc: n,
     mirror,

packages/rrweb/src/record/index.ts

@@ -1,7 +1,7 @@
 import {
   snapshot,
+  slimDOMDefaults,
   type MaskInputOptions,
-  type SlimDOMOptions,
   createMirror,
 } from 'rrweb-snapshot';
 import { initObservers, mutationBuffers } from './observer';
@@ -160,26 +160,7 @@
       ? _maskInputOptions
       : { password: true };
 
-  const slimDOMOptions: SlimDOMOptions =
-    _slimDOMOptions === true || _slimDOMOptions === 'all'
-      ? {
-          script: true,
-          comment: true,
-          headFavicon: true,
-          headWhitespace: true,
-          headMetaSocial: true,
-          headMetaRobots: true,
-          headMetaHttpEquiv: true,
-          headMetaVerification: true,
-          // the following are off for slimDOMOptions === true,
-          // as they destroy some (hidden) info:
-          headMetaAuthorship: _slimDOMOptions === 'all',
-          headMetaDescKeywords: _slimDOMOptions === 'all',
-          headTitleMutations: _slimDOMOptions === 'all',
-        }
-      : _slimDOMOptions
-      ? _slimDOMOptions
-      : {};
+  const slimDOMOptions = slimDOMDefaults(_slimDOMOptions);
 
   polyfill();
 
@@ -557,7 +538,7 @@
             plugins
               ?.filter((p) => p.observer)
               ?.map((p) => ({
                 observer: p.observer!,
                 options: p.options,
                 callback: (payload: object) =>
                   wrappedEmit({
@@ -575,7 +556,7 @@
 
     iframeManager.addLoadListener((iframeEl) => {
       try {
         handlers.push(observe(iframeEl.contentDocument!));
       } catch (error) {
         // TODO: handle internal error
         console.warn(error);
@@ -587,10 +568,7 @@
       handlers.push(observe(document));
       recording = true;
     };
-    if (
-      document.readyState === 'interactive' ||
-      document.readyState === 'complete'
-    ) {
+    if (['interactive', 'complete'].includes(document.readyState)) {
       init();
     } else {
       handlers.push(