add the inline stylesheet option when recording

package.json

@@ -59,7 +59,7 @@
   "dependencies": {
     "@types/smoothscroll-polyfill": "^0.3.0",
     "mitt": "^1.1.3",
-    "rrweb-snapshot": "^0.7.9",
+    "rrweb-snapshot": "^0.7.10",
     "smoothscroll-polyfill": "^0.4.3"
   }
 }

src/record/index.ts

@@ -24,6 +24,7 @@ function record(options: recordOptions = {}): listenerHandler | undefined {
     checkoutEveryNth,
     blockClass = 'rr-block',
     ignoreClass = 'rr-ignore',
+    inlineStylesheet = true,
   } = options;
   // runtime checks for user options
   if (!emit) {
@@ -62,7 +63,7 @@ function record(options: recordOptions = {}): listenerHandler | undefined {
       }),
       isCheckout,
     );
-    const [node, idNodeMap] = snapshot(document, blockClass);
+    const [node, idNodeMap] = snapshot(document, blockClass, inlineStylesheet);
     if (!node) {
       return console.warn('Failed to snapshot the document');
     }
@@ -160,6 +161,7 @@ function record(options: recordOptions = {}): listenerHandler | undefined {
             ),
           blockClass,
           ignoreClass,
+          inlineStylesheet,
         }),
       );
     };

src/record/observer.ts

@@ -50,6 +50,7 @@ import { deepDelete, isParentRemoved, isParentDropped } from './collection';
 function initMutationObserver(
   cb: mutationCallBack,
   blockClass: blockClass,
+  inlineStylesheet: boolean,
 ): MutationObserver {
   const observer = new MutationObserver(mutations => {
     const texts: textCursor[] = [];
@@ -407,7 +408,11 @@ function initInputObserver(
 }
 
 export default function initObservers(o: observerParam): listenerHandler {
-  const mutationObserver = initMutationObserver(o.mutationCb, o.blockClass);
+  const mutationObserver = initMutationObserver(
+    o.mutationCb,
+    o.blockClass,
+    o.inlineStylesheet,
+  );
   const mousemoveHandler = initMousemoveObserver(o.mousemoveCb);
   const mouseInteractionHandler = initMouseInteractionObserver(
     o.mouseInteractionCb,

src/replay/styles/style.css

@@ -1,3 +1,6 @@
+body {
+  margin: 0;
+}
 .replayer-wrapper {
   position: relative;
 }

src/types.ts

@@ -106,6 +106,7 @@ export type recordOptions = {
   checkoutEveryNms?: number;
   blockClass?: blockClass;
   ignoreClass?: string;
+  inlineStylesheet?: boolean;
 };
 
 export type observerParam = {
@@ -117,6 +118,7 @@ export type observerParam = {
   inputCb: inputCallback;
   blockClass: blockClass;
   ignoreClass: string;
+  inlineStylesheet: boolean;
 };
 
 export type textCursor = {