rrweb-snapshot - npm Package Compare versions

Comparing version 0.8.0 to 0.8.1

dist/rrweb-snapshot.js

@@ -14,3 +14,3 @@ var rrwebSnapshot = (function (exports) {
   var _id = 1;
-  var symbolAndNumberRegex = RegExp('[^a-z1-6-]');
+  var tagNameRegex = RegExp('[^a-z1-6-_]');
   function genId() {
@@ -21,3 +21,3 @@ return _id++;
       var processedTagName = tagName.toLowerCase().trim();
-      if (symbolAndNumberRegex.test(processedTagName)) {
+      if (tagNameRegex.test(processedTagName)) {
           return 'div';
@@ -112,3 +112,3 @@ }
       })
-          .join(',');
+          .join(', ');
       return resultingSrcsetString;
@@ -141,3 +141,3 @@ }
   }
-  function serializeNode(n, doc, blockClass, inlineStylesheet, maskInputOptions) {
+  function serializeNode(n, doc, blockClass, inlineStylesheet, maskInputOptions, recordCanvas) {
       if (maskInputOptions === void 0) { maskInputOptions = {}; }
@@ -221,3 +221,3 @@ switch (n.nodeType) {
               }
-              if (tagName === 'canvas') {
+              if (tagName === 'canvas' && recordCanvas) {
                   attributes_1.rr_dataURL = n.toDataURL();
@@ -230,2 +230,8 @@ }
               }
+              if (n.scrollLeft) {
+                  attributes_1.rr_scrollLeft = n.scrollLeft;
+              }
+              if (n.scrollTop) {
+                  attributes_1.rr_scrollTop = n.scrollTop;
+              }
               if (needBlock_1) {
@@ -273,6 +279,6 @@ var _c = n.getBoundingClientRect(), width = _c.width, height = _c.height;
   }
-  function serializeNodeWithId(n, doc, map, blockClass, skipChild, inlineStylesheet, maskInputOptions) {
+  function serializeNodeWithId(n, doc, map, blockClass, skipChild, inlineStylesheet, maskInputOptions, recordCanvas) {
       if (skipChild === void 0) { skipChild = false; }
       if (inlineStylesheet === void 0) { inlineStylesheet = true; }
-      var _serializedNode = serializeNode(n, doc, blockClass, inlineStylesheet, maskInputOptions);
+      var _serializedNode = serializeNode(n, doc, blockClass, inlineStylesheet, maskInputOptions, recordCanvas || false);
       if (!_serializedNode) {
@@ -302,3 +308,3 @@ console.warn(n, 'not serialized');
               var childN = _a[_i];
-              var serializedChildNode = serializeNodeWithId(childN, doc, map, blockClass, skipChild, inlineStylesheet, maskInputOptions);
+              var serializedChildNode = serializeNodeWithId(childN, doc, map, blockClass, skipChild, inlineStylesheet, maskInputOptions, recordCanvas);
               if (serializedChildNode) {
@@ -311,3 +317,3 @@ serializedNode.childNodes.push(serializedChildNode);
   }
-  function snapshot(n, blockClass, inlineStylesheet, maskAllInputsOrOptions) {
+  function snapshot(n, blockClass, inlineStylesheet, maskAllInputsOrOptions, recordCanvas) {
       if (blockClass === void 0) { blockClass = 'rr-block'; }
@@ -330,3 +336,5 @@ if (inlineStylesheet === void 0) { inlineStylesheet = true; }
               url: true,
-              week: true
+              week: true,
+              textarea: true,
+              select: true
           }
@@ -337,6 +345,16 @@ : maskAllInputsOrOptions === false
       return [
-          serializeNodeWithId(n, n, idNodeMap, blockClass, false, inlineStylesheet, maskInputOptions),
+          serializeNodeWithId(n, n, idNodeMap, blockClass, false, inlineStylesheet, maskInputOptions, recordCanvas),
           idNodeMap,
       ];
   }
+  function visitSnapshot(node, onVisit) {
+      function walk(current) {
+          onVisit(current);
+          if (current.type === exports.NodeType.Document ||
+              current.type === exports.NodeType.Element) {
+              current.childNodes.forEach(walk);
+          }
+      }
+      walk(node);
+  }
 
@@ -867,3 +885,4 @@ var commentre = /\/\*[^*]*\*+([^/*][^*]*\*+)*\//g;
                   var value = n.attributes[name];
-                  value = typeof value === 'boolean' ? '' : value;
+                  value =
+                      typeof value === 'boolean' || typeof value === 'number' ? '' : value;
                   if (!name.startsWith('rr_')) {
@@ -893,3 +912,5 @@ var isTextarea = tagName === 'textarea' && name === 'value';
                           }
-                          else if (name == 'onload' || name == 'onclick' || name.substring(0, 7) == 'onmouse') {
+                          else if (name === 'onload' ||
+                              name === 'onclick' ||
+                              name.substring(0, 7) === 'onmouse') {
                               node_1.setAttribute('_' + name, value);
@@ -976,6 +997,42 @@ }
   }
-  function rebuild(n, doc, HACK_CSS) {
+  function visit(idNodeMap, onVisit) {
+      function walk(node) {
+          onVisit(node);
+      }
+      for (var key in idNodeMap) {
+          if (idNodeMap[key]) {
+              walk(idNodeMap[key]);
+          }
+      }
+  }
+  function handleScroll(node) {
+      var n = node.__sn;
+      if (n.type !== exports.NodeType.Element) {
+          return;
+      }
+      var el = node;
+      for (var name in n.attributes) {
+          if (!(n.attributes.hasOwnProperty(name) && name.startsWith('rr_'))) {
+              continue;
+          }
+          var value = n.attributes[name];
+          if (name === 'rr_scrollLeft') {
+              el.scrollLeft = value;
+          }
+          if (name === 'rr_scrollTop') {
+              el.scrollTop = value;
+          }
+      }
+  }
+  function rebuild(n, doc, onVisit, HACK_CSS) {
       if (HACK_CSS === void 0) { HACK_CSS = true; }
       var idNodeMap = {};
-      return [buildNodeWithSN(n, doc, idNodeMap, false, HACK_CSS), idNodeMap];
+      var node = buildNodeWithSN(n, doc, idNodeMap, false, HACK_CSS);
+      visit(idNodeMap, function (visitedNode) {
+          if (onVisit) {
+              onVisit(visitedNode);
+          }
+          handleScroll(visitedNode);
+      });
+      return [node, idNodeMap];
   }
@@ -989,2 +1046,3 @@
   exports.transformAttribute = transformAttribute;
+  exports.visitSnapshot = visitSnapshot;
 
@@ -991,0 +1049,0 @@ return exports;

dist/rrweb-snapshot.min.js

@@ -1,2 +0,2 @@
-var rrwebSnapshot=function(e){"use strict";var t;(t=e.NodeType||(e.NodeType={}))[t.Document=0]="Document",t[t.DocumentType=1]="DocumentType",t[t.Element=2]="Element",t[t.Text=3]="Text",t[t.CDATA=4]="CDATA",t[t.Comment=5]="Comment";var r=1,n=RegExp("[^a-z1-6-]");function a(e){try{var t=e.rules||e.cssRules;return t?Array.from(t).reduce(function(e,t){return e+(function(e){return"styleSheet"in e}(r=t)?a(r.styleSheet)||"":r.cssText);var r},""):null}catch(e){return null}}var i=/url\((?:'([^']*)'|"([^"]*)"|([^)]*))\)/gm,o=/^(?!www\.|(?:http|ftp)s?:\/\/|[A-Za-z]:\\|\/\/).*/,s=/^(data:)([\w\/\+\-]+);(charset=[\w-]+|base64).*,(.*)/i;function u(e,t){return(e||"").replace(i,function(e,r,n,a){var i,u=r||n||a;if(!u)return e;if(!o.test(u))return"url('"+u+"')";if(s.test(u))return"url("+u+")";if("/"===u[0])return"url('"+(((i=t).indexOf("//")>-1?i.split("/").slice(0,3).join("/"):i.split("/")[0]).split("?")[0]+u)+"')";var c=t.split("/"),f=u.split("/");c.pop();for(var l=0,p=f;l<p.length;l++){var m=p[l];"."!==m&&(".."===m?c.pop():c.push(m))}return"url('"+c.join("/")+"')"})}function c(e,t){if(!t||""===t.trim())return t;var r=e.createElement("a");return r.href=t,r.href}function f(e,t,r){return"src"===t||"href"===t&&r?c(e,r):"srcset"===t&&r?function(e,t){return""===t.trim()?t:t.split(",").map(function(t){var r=t.trimLeft().trimRight().split(" ");return 2===r.length?c(e,r[0])+" "+r[1]:1===r.length?""+c(e,r[0]):""}).join(",")}(e,r):"style"===t&&r?u(r,location.href):r}function l(t,r,i,o,s){switch(void 0===s&&(s={}),t.nodeType){case t.DOCUMENT_NODE:return{type:e.NodeType.Document,childNodes:[]};case t.DOCUMENT_TYPE_NODE:return{type:e.NodeType.DocumentType,name:t.name,publicId:t.publicId,systemId:t.systemId};case t.ELEMENT_NODE:var c=!1;"string"==typeof i?c=t.classList.contains(i):t.classList.forEach(function(e){i.test(e)&&(c=!0)});for(var l=function(e){var t=e.toLowerCase().trim();return n.test(t)?"div":t}(t.tagName),p={},m=0,d=Array.from(t.attributes);m<d.length;m++){var h=d[m],v=h.name,y=h.value;p[v]=f(r,v,y)}if("link"===l&&o){var g,T=Array.from(r.styleSheets).find(function(e){return e.href===t.href});(g=a(T))&&(delete p.rel,delete p.href,p._cssText=u(g,T.href))}if("style"===l&&t.sheet&&!(t.innerText||t.textContent||"").trim().length)(g=a(t.sheet))&&(p._cssText=u(g,location.href));if("input"===l||"textarea"===l||"select"===l){y=t.value;"radio"!==p.type&&"checkbox"!==p.type&&"submit"!==p.type&&"button"!==p.type&&y?p.value=s[p.type]||s[l]?"*".repeat(y.length):y:t.checked&&(p.checked=t.checked)}if("option"===l){var N=t.parentElement;p.value===N.value&&(p.selected=t.selected)}if("canvas"===l&&(p.rr_dataURL=t.toDataURL()),"audio"!==l&&"video"!==l||(p.rr_mediaState=t.paused?"paused":"played"),c){var E=t.getBoundingClientRect(),C=E.width,x=E.height;p.rr_width=C+"px",p.rr_height=x+"px"}return{type:e.NodeType.Element,tagName:l,attributes:p,childNodes:[],isSVG:(A=t,"svg"===A.tagName||A instanceof SVGElement||void 0),needBlock:c};case t.TEXT_NODE:var b=t.parentNode&&t.parentNode.tagName,w=t.textContent,D="STYLE"===b||void 0;return D&&w&&(w=u(w,location.href)),"SCRIPT"===b&&(w="SCRIPT_PLACEHOLDER"),{type:e.NodeType.Text,textContent:w||"",isStyle:D};case t.CDATA_SECTION_NODE:return{type:e.NodeType.CDATA,textContent:""};case t.COMMENT_NODE:return{type:e.NodeType.Comment,textContent:t.textContent||""};default:return!1}var A}function p(t,n,a,i,o,s,u){void 0===o&&(o=!1),void 0===s&&(s=!0);var c,f=l(t,n,i,s,u);if(!f)return console.warn(t,"not serialized"),null;c="__sn"in t?t.__sn.id:r++;var m=Object.assign(f,{id:c});t.__sn=m,a[c]=t;var d=!o;if(m.type===e.NodeType.Element&&(d=d&&!m.needBlock,delete m.needBlock),(m.type===e.NodeType.Document||m.type===e.NodeType.Element)&&d)for(var h=0,v=Array.from(t.childNodes);h<v.length;h++){var y=p(v[h],n,a,i,o,s,u);y&&m.childNodes.push(y)}return m}var m=/\/\*[^*]*\*+([^\/*][^*]*\*+)*\//g;function d(e,t){void 0===t&&(t={});var r=1,n=1;function a(e){var t=e.match(/\n/g);t&&(r+=t.length);var a=e.lastIndexOf("\n");n=-1===a?n+e.length:e.length-a}function i(){var e={line:r,column:n};return function(t){return t.position=new o(e),d(),t}}var o=function(){return function(e){this.start=e,this.end={line:r,column:n},this.source=t.source}}();o.prototype.content=e;var s=[];function u(a){var i=new Error(t.source+":"+r+":"+n+": "+a);if(i.reason=a,i.filename=t.source,i.line=r,i.column=n,i.source=e,!t.silent)throw i;s.push(i)}function c(){return p(/^{\s*/)}function f(){return p(/^}/)}function l(){var t,r=[];for(d(),v(r);e.length&&"}"!==e.charAt(0)&&(t=A()||_());)!1!==t&&(r.push(t),v(r));return r}function p(t){var r=t.exec(e);if(r){var n=r[0];return a(n),e=e.slice(n.length),r}}function d(){p(/^\s*/)}function v(e){var t;for(void 0===e&&(e=[]);t=y();)!1!==t&&e.push(t),t=y();return e}function y(){var t=i();if("/"===e.charAt(0)&&"*"===e.charAt(1)){for(var r=2;""!==e.charAt(r)&&("*"!==e.charAt(r)||"/"!==e.charAt(r+1));)++r;if(r+=2,""===e.charAt(r-1))return u("End of comment missing");var o=e.slice(2,r-2);return n+=2,a(o),e=e.slice(r),n+=2,t({type:"comment",comment:o})}}function g(){var e=p(/^([^{]+)/);if(e)return h(e[0]).replace(/\/\*([^*]|[\r\n]|(\*+([^*\/]|[\r\n])))*\*\/+/g,"").replace(/"(?:\\"|[^"])*"|'(?:\\'|[^'])*'/g,function(e){return e.replace(/,/g,"‌")}).split(/\s*(?![^(]*\)),\s*/).map(function(e){return e.replace(/\u200C/g,",")})}function T(){var e=i(),t=p(/^(\*?[-#\/\*\\\w]+(\[[0-9a-z_-]+\])?)\s*/);if(t){var r=h(t[0]);if(!p(/^:\s*/))return u("property missing ':'");var n=p(/^((?:'(?:\\'|.)*?'|"(?:\\"|.)*?"|\([^\)]*?\)|[^};])+)/),a=e({type:"declaration",property:r.replace(m,""),value:n?h(n[0]).replace(m,""):""});return p(/^[;\s]*/),a}}function N(){var e,t=[];if(!c())return u("missing '{'");for(v(t);e=T();)!1!==e&&(t.push(e),v(t)),e=T();return f()?t:u("missing '}'")}function E(){for(var e,t=[],r=i();e=p(/^((\d+\.\d+|\.\d+|\d+)%?|[a-z]+)\s*/);)t.push(e[1]),p(/^,\s*/);if(t.length)return r({type:"keyframe",values:t,declarations:N()})}var C,x=D("import"),b=D("charset"),w=D("namespace");function D(e){var t=new RegExp("^@"+e+"\\s*([^;]+);");return function(){var r=i(),n=p(t);if(n){var a={type:e};return a[e]=n[1].trim(),r(a)}}}function A(){if("@"===e[0])return function(){var e=i(),t=p(/^@([-\w]+)?keyframes\s*/);if(t){var r=t[1];if(!(t=p(/^([-\w]+)\s*/)))return u("@keyframes missing name");var n,a=t[1];if(!c())return u("@keyframes missing '{'");for(var o=v();n=E();)o.push(n),o=o.concat(v());return f()?e({type:"keyframes",name:a,vendor:r,keyframes:o}):u("@keyframes missing '}'")}}()||function(){var e=i(),t=p(/^@media *([^{]+)/);if(t){var r=h(t[1]);if(!c())return u("@media missing '{'");var n=v().concat(l());return f()?e({type:"media",media:r,rules:n}):u("@media missing '}'")}}()||function(){var e=i(),t=p(/^@custom-media\s+(--[^\s]+)\s*([^{;]+);/);if(t)return e({type:"custom-media",name:h(t[1]),media:h(t[2])})}()||function(){var e=i(),t=p(/^@supports *([^{]+)/);if(t){var r=h(t[1]);if(!c())return u("@supports missing '{'");var n=v().concat(l());return f()?e({type:"supports",supports:r,rules:n}):u("@supports missing '}'")}}()||x()||b()||w()||function(){var e=i(),t=p(/^@([-\w]+)?document *([^{]+)/);if(t){var r=h(t[1]),n=h(t[2]);if(!c())return u("@document missing '{'");var a=v().concat(l());return f()?e({type:"document",document:n,vendor:r,rules:a}):u("@document missing '}'")}}()||function(){var e=i();if(p(/^@page */)){var t=g()||[];if(!c())return u("@page missing '{'");for(var r,n=v();r=T();)n.push(r),n=n.concat(v());return f()?e({type:"page",selectors:t,declarations:n}):u("@page missing '}'")}}()||function(){var e=i();if(p(/^@host\s*/)){if(!c())return u("@host missing '{'");var t=v().concat(l());return f()?e({type:"host",rules:t}):u("@host missing '}'")}}()||function(){var e=i();if(p(/^@font-face\s*/)){if(!c())return u("@font-face missing '{'");for(var t,r=v();t=T();)r.push(t),r=r.concat(v());return f()?e({type:"font-face",declarations:r}):u("@font-face missing '}'")}}()}function _(){var e=i(),t=g();return t?(v(),e({type:"rule",selectors:t,declarations:N()})):u("selector missing")}return function e(t,r){var n=t&&"string"==typeof t.type;var a=n?t:r;for(var i=0,o=Object.keys(t);i<o.length;i++){var s=o[i],u=t[s];Array.isArray(u)?u.forEach(function(t){e(t,a)}):u&&"object"==typeof u&&e(u,a)}n&&Object.defineProperty(t,"parent",{configurable:!0,writable:!0,enumerable:!1,value:r||null});return t}((C=l(),{type:"stylesheet",stylesheet:{source:t.source,rules:C,parsingErrors:s}}))}function h(e){return e?e.replace(/^\s+|\s+$/g,""):""}var v={script:"noscript",altglyph:"altGlyph",altglyphdef:"altGlyphDef",altglyphitem:"altGlyphItem",animatecolor:"animateColor",animatemotion:"animateMotion",animatetransform:"animateTransform",clippath:"clipPath",feblend:"feBlend",fecolormatrix:"feColorMatrix",fecomponenttransfer:"feComponentTransfer",fecomposite:"feComposite",feconvolvematrix:"feConvolveMatrix",fediffuselighting:"feDiffuseLighting",fedisplacementmap:"feDisplacementMap",fedistantlight:"feDistantLight",fedropshadow:"feDropShadow",feflood:"feFlood",fefunca:"feFuncA",fefuncb:"feFuncB",fefuncg:"feFuncG",fefuncr:"feFuncR",fegaussianblur:"feGaussianBlur",feimage:"feImage",femerge:"feMerge",femergenode:"feMergeNode",femorphology:"feMorphology",feoffset:"feOffset",fepointlight:"fePointLight",fespecularlighting:"feSpecularLighting",fespotlight:"feSpotLight",fetile:"feTile",feturbulence:"feTurbulence",foreignobject:"foreignObject",glyphref:"glyphRef",lineargradient:"linearGradient",radialgradient:"radialGradient"};var y=/([^\\]):hover/g;function g(e){var t=d(e,{silent:!0});return t.stylesheet?(t.stylesheet.rules.forEach(function(t){"selectors"in t&&(t.selectors||[]).forEach(function(t){if(y.test(t)){var r=t.replace(y,"$1.\\:hover");e=e.replace(t,t+", "+r)}})}),e):e}function T(t,r,n){switch(t.type){case e.NodeType.Document:return r.implementation.createDocument(null,"",null);case e.NodeType.DocumentType:return r.implementation.createDocumentType(t.name,t.publicId,t.systemId);case e.NodeType.Element:var a,i=function(e){var t=v[e.tagName]?v[e.tagName]:e.tagName;return"link"===t&&e.attributes._cssText&&(t="style"),t}(t);a=t.isSVG?r.createElementNS("http://www.w3.org/2000/svg",i):r.createElement(i);var o=function(e){if(!t.attributes.hasOwnProperty(e))return"continue";var o=t.attributes[e];if(o="boolean"==typeof o?"":o,e.startsWith("rr_")){if("canvas"===i&&"rr_dataURL"===e){var s=document.createElement("img");s.src=o,s.onload=function(){var e=a.getContext("2d");e&&e.drawImage(s,0,0,s.width,s.height)}}if("rr_width"===e&&(a.style.width=o),"rr_height"===e&&(a.style.height=o),"rr_mediaState"===e)switch(o){case"played":a.play();case"paused":a.pause()}}else{var u="textarea"===i&&"value"===e,c="style"===i&&"_cssText"===e;if(c&&n&&(o=g(o)),u||c){for(var f=r.createTextNode(o),l=0,p=Array.from(a.childNodes);l<p.length;l++){var m=p[l];m.nodeType===a.TEXT_NODE&&a.removeChild(m)}return a.appendChild(f),"continue"}if("iframe"===i&&"src"===e)return"continue";try{t.isSVG&&"xlink:href"===e?a.setAttributeNS("http://www.w3.org/1999/xlink",e,o):"onload"==e||"onclick"==e||"onmouse"==e.substring(0,7)?a.setAttribute("_"+e,o):a.setAttribute(e,o)}catch(e){}}};for(var s in t.attributes)o(s);return a;case e.NodeType.Text:return r.createTextNode(t.isStyle&&n?g(t.textContent):t.textContent);case e.NodeType.CDATA:return r.createCDATASection(t.textContent);case e.NodeType.Comment:return r.createComment(t.textContent);default:return null}}function N(t,r,n,a,i){void 0===a&&(a=!1),void 0===i&&(i=!0);var o=T(t,r,i);if(!o)return null;if(t.type===e.NodeType.Document&&(r.close(),r.open(),o=r),o.__sn=t,n[t.id]=o,(t.type===e.NodeType.Document||t.type===e.NodeType.Element)&&!a)for(var s=0,u=t.childNodes;s<u.length;s++){var c=u[s],f=N(c,r,n,!1,i);f?o.appendChild(f):console.warn("Failed to rebuild",c)}return o}return e.snapshot=function(e,t,r,n){void 0===t&&(t="rr-block"),void 0===r&&(r=!0);var a={};return[p(e,e,a,t,!1,r,!0===n?{color:!0,date:!0,"datetime-local":!0,email:!0,month:!0,number:!0,range:!0,search:!0,tel:!0,text:!0,time:!0,url:!0,week:!0}:!1===n?{}:n),a]},e.serializeNodeWithId=p,e.rebuild=function(e,t,r){void 0===r&&(r=!0);var n={};return[N(e,t,n,!1,r),n]},e.buildNodeWithSN=N,e.addHoverClass=g,e.transformAttribute=f,e}({});
+var rrwebSnapshot=function(e){"use strict";var t;(t=e.NodeType||(e.NodeType={}))[t.Document=0]="Document",t[t.DocumentType=1]="DocumentType",t[t.Element=2]="Element",t[t.Text=3]="Text",t[t.CDATA=4]="CDATA",t[t.Comment=5]="Comment";var r=1,n=RegExp("[^a-z1-6-_]");function a(e){try{var t=e.rules||e.cssRules;return t?Array.from(t).reduce(function(e,t){return e+(function(e){return"styleSheet"in e}(r=t)?a(r.styleSheet)||"":r.cssText);var r},""):null}catch(e){return null}}var i=/url\((?:'([^']*)'|"([^"]*)"|([^)]*))\)/gm,o=/^(?!www\.|(?:http|ftp)s?:\/\/|[A-Za-z]:\\|\/\/).*/,s=/^(data:)([\w\/\+\-]+);(charset=[\w-]+|base64).*,(.*)/i;function c(e,t){return(e||"").replace(i,function(e,r,n,a){var i,c=r||n||a;if(!c)return e;if(!o.test(c))return"url('"+c+"')";if(s.test(c))return"url("+c+")";if("/"===c[0])return"url('"+(((i=t).indexOf("//")>-1?i.split("/").slice(0,3).join("/"):i.split("/")[0]).split("?")[0]+c)+"')";var u=t.split("/"),f=c.split("/");u.pop();for(var l=0,p=f;l<p.length;l++){var m=p[l];"."!==m&&(".."===m?u.pop():u.push(m))}return"url('"+u.join("/")+"')"})}function u(e,t){if(!t||""===t.trim())return t;var r=e.createElement("a");return r.href=t,r.href}function f(e,t,r){return"src"===t||"href"===t&&r?u(e,r):"srcset"===t&&r?function(e,t){return""===t.trim()?t:t.split(",").map(function(t){var r=t.trimLeft().trimRight().split(" ");return 2===r.length?u(e,r[0])+" "+r[1]:1===r.length?""+u(e,r[0]):""}).join(", ")}(e,r):"style"===t&&r?c(r,location.href):r}function l(t,r,i,o,s,u){switch(void 0===s&&(s={}),t.nodeType){case t.DOCUMENT_NODE:return{type:e.NodeType.Document,childNodes:[]};case t.DOCUMENT_TYPE_NODE:return{type:e.NodeType.DocumentType,name:t.name,publicId:t.publicId,systemId:t.systemId};case t.ELEMENT_NODE:var l=!1;"string"==typeof i?l=t.classList.contains(i):t.classList.forEach(function(e){i.test(e)&&(l=!0)});for(var p=function(e){var t=e.toLowerCase().trim();return n.test(t)?"div":t}(t.tagName),m={},d=0,h=Array.from(t.attributes);d<h.length;d++){var v=h[d],y=v.name,g=v.value;m[y]=f(r,y,g)}if("link"===p&&o){var T,N=Array.from(r.styleSheets).find(function(e){return e.href===t.href});(T=a(N))&&(delete m.rel,delete m.href,m._cssText=c(T,N.href))}if("style"===p&&t.sheet&&!(t.innerText||t.textContent||"").trim().length)(T=a(t.sheet))&&(m._cssText=c(T,location.href));if("input"===p||"textarea"===p||"select"===p){g=t.value;"radio"!==m.type&&"checkbox"!==m.type&&"submit"!==m.type&&"button"!==m.type&&g?m.value=s[m.type]||s[p]?"*".repeat(g.length):g:t.checked&&(m.checked=t.checked)}if("option"===p){var E=t.parentElement;m.value===E.value&&(m.selected=t.selected)}if("canvas"===p&&u&&(m.rr_dataURL=t.toDataURL()),"audio"!==p&&"video"!==p||(m.rr_mediaState=t.paused?"paused":"played"),t.scrollLeft&&(m.rr_scrollLeft=t.scrollLeft),t.scrollTop&&(m.rr_scrollTop=t.scrollTop),l){var b=t.getBoundingClientRect(),x=b.width,C=b.height;m.rr_width=x+"px",m.rr_height=C+"px"}return{type:e.NodeType.Element,tagName:p,attributes:m,childNodes:[],isSVG:(A=t,"svg"===A.tagName||A instanceof SVGElement||void 0),needBlock:l};case t.TEXT_NODE:var _=t.parentNode&&t.parentNode.tagName,w=t.textContent,D="STYLE"===_||void 0;return D&&w&&(w=c(w,location.href)),"SCRIPT"===_&&(w="SCRIPT_PLACEHOLDER"),{type:e.NodeType.Text,textContent:w||"",isStyle:D};case t.CDATA_SECTION_NODE:return{type:e.NodeType.CDATA,textContent:""};case t.COMMENT_NODE:return{type:e.NodeType.Comment,textContent:t.textContent||""};default:return!1}var A}function p(t,n,a,i,o,s,c,u){void 0===o&&(o=!1),void 0===s&&(s=!0);var f,m=l(t,n,i,s,c,u||!1);if(!m)return console.warn(t,"not serialized"),null;f="__sn"in t?t.__sn.id:r++;var d=Object.assign(m,{id:f});t.__sn=d,a[f]=t;var h=!o;if(d.type===e.NodeType.Element&&(h=h&&!d.needBlock,delete d.needBlock),(d.type===e.NodeType.Document||d.type===e.NodeType.Element)&&h)for(var v=0,y=Array.from(t.childNodes);v<y.length;v++){var g=p(y[v],n,a,i,o,s,c,u);g&&d.childNodes.push(g)}return d}var m=/\/\*[^*]*\*+([^\/*][^*]*\*+)*\//g;function d(e,t){void 0===t&&(t={});var r=1,n=1;function a(e){var t=e.match(/\n/g);t&&(r+=t.length);var a=e.lastIndexOf("\n");n=-1===a?n+e.length:e.length-a}function i(){var e={line:r,column:n};return function(t){return t.position=new o(e),d(),t}}var o=function(){return function(e){this.start=e,this.end={line:r,column:n},this.source=t.source}}();o.prototype.content=e;var s=[];function c(a){var i=new Error(t.source+":"+r+":"+n+": "+a);if(i.reason=a,i.filename=t.source,i.line=r,i.column=n,i.source=e,!t.silent)throw i;s.push(i)}function u(){return p(/^{\s*/)}function f(){return p(/^}/)}function l(){var t,r=[];for(d(),v(r);e.length&&"}"!==e.charAt(0)&&(t=D()||A());)!1!==t&&(r.push(t),v(r));return r}function p(t){var r=t.exec(e);if(r){var n=r[0];return a(n),e=e.slice(n.length),r}}function d(){p(/^\s*/)}function v(e){var t;for(void 0===e&&(e=[]);t=y();)!1!==t&&e.push(t),t=y();return e}function y(){var t=i();if("/"===e.charAt(0)&&"*"===e.charAt(1)){for(var r=2;""!==e.charAt(r)&&("*"!==e.charAt(r)||"/"!==e.charAt(r+1));)++r;if(r+=2,""===e.charAt(r-1))return c("End of comment missing");var o=e.slice(2,r-2);return n+=2,a(o),e=e.slice(r),n+=2,t({type:"comment",comment:o})}}function g(){var e=p(/^([^{]+)/);if(e)return h(e[0]).replace(/\/\*([^*]|[\r\n]|(\*+([^*\/]|[\r\n])))*\*\/+/g,"").replace(/"(?:\\"|[^"])*"|'(?:\\'|[^'])*'/g,function(e){return e.replace(/,/g,"‌")}).split(/\s*(?![^(]*\)),\s*/).map(function(e){return e.replace(/\u200C/g,",")})}function T(){var e=i(),t=p(/^(\*?[-#\/\*\\\w]+(\[[0-9a-z_-]+\])?)\s*/);if(t){var r=h(t[0]);if(!p(/^:\s*/))return c("property missing ':'");var n=p(/^((?:'(?:\\'|.)*?'|"(?:\\"|.)*?"|\([^\)]*?\)|[^};])+)/),a=e({type:"declaration",property:r.replace(m,""),value:n?h(n[0]).replace(m,""):""});return p(/^[;\s]*/),a}}function N(){var e,t=[];if(!u())return c("missing '{'");for(v(t);e=T();)!1!==e&&(t.push(e),v(t)),e=T();return f()?t:c("missing '}'")}function E(){for(var e,t=[],r=i();e=p(/^((\d+\.\d+|\.\d+|\d+)%?|[a-z]+)\s*/);)t.push(e[1]),p(/^,\s*/);if(t.length)return r({type:"keyframe",values:t,declarations:N()})}var b,x=w("import"),C=w("charset"),_=w("namespace");function w(e){var t=new RegExp("^@"+e+"\\s*([^;]+);");return function(){var r=i(),n=p(t);if(n){var a={type:e};return a[e]=n[1].trim(),r(a)}}}function D(){if("@"===e[0])return function(){var e=i(),t=p(/^@([-\w]+)?keyframes\s*/);if(t){var r=t[1];if(!(t=p(/^([-\w]+)\s*/)))return c("@keyframes missing name");var n,a=t[1];if(!u())return c("@keyframes missing '{'");for(var o=v();n=E();)o.push(n),o=o.concat(v());return f()?e({type:"keyframes",name:a,vendor:r,keyframes:o}):c("@keyframes missing '}'")}}()||function(){var e=i(),t=p(/^@media *([^{]+)/);if(t){var r=h(t[1]);if(!u())return c("@media missing '{'");var n=v().concat(l());return f()?e({type:"media",media:r,rules:n}):c("@media missing '}'")}}()||function(){var e=i(),t=p(/^@custom-media\s+(--[^\s]+)\s*([^{;]+);/);if(t)return e({type:"custom-media",name:h(t[1]),media:h(t[2])})}()||function(){var e=i(),t=p(/^@supports *([^{]+)/);if(t){var r=h(t[1]);if(!u())return c("@supports missing '{'");var n=v().concat(l());return f()?e({type:"supports",supports:r,rules:n}):c("@supports missing '}'")}}()||x()||C()||_()||function(){var e=i(),t=p(/^@([-\w]+)?document *([^{]+)/);if(t){var r=h(t[1]),n=h(t[2]);if(!u())return c("@document missing '{'");var a=v().concat(l());return f()?e({type:"document",document:n,vendor:r,rules:a}):c("@document missing '}'")}}()||function(){var e=i();if(p(/^@page */)){var t=g()||[];if(!u())return c("@page missing '{'");for(var r,n=v();r=T();)n.push(r),n=n.concat(v());return f()?e({type:"page",selectors:t,declarations:n}):c("@page missing '}'")}}()||function(){var e=i();if(p(/^@host\s*/)){if(!u())return c("@host missing '{'");var t=v().concat(l());return f()?e({type:"host",rules:t}):c("@host missing '}'")}}()||function(){var e=i();if(p(/^@font-face\s*/)){if(!u())return c("@font-face missing '{'");for(var t,r=v();t=T();)r.push(t),r=r.concat(v());return f()?e({type:"font-face",declarations:r}):c("@font-face missing '}'")}}()}function A(){var e=i(),t=g();return t?(v(),e({type:"rule",selectors:t,declarations:N()})):c("selector missing")}return function e(t,r){var n=t&&"string"==typeof t.type;var a=n?t:r;for(var i=0,o=Object.keys(t);i<o.length;i++){var s=o[i],c=t[s];Array.isArray(c)?c.forEach(function(t){e(t,a)}):c&&"object"==typeof c&&e(c,a)}n&&Object.defineProperty(t,"parent",{configurable:!0,writable:!0,enumerable:!1,value:r||null});return t}((b=l(),{type:"stylesheet",stylesheet:{source:t.source,rules:b,parsingErrors:s}}))}function h(e){return e?e.replace(/^\s+|\s+$/g,""):""}var v={script:"noscript",altglyph:"altGlyph",altglyphdef:"altGlyphDef",altglyphitem:"altGlyphItem",animatecolor:"animateColor",animatemotion:"animateMotion",animatetransform:"animateTransform",clippath:"clipPath",feblend:"feBlend",fecolormatrix:"feColorMatrix",fecomponenttransfer:"feComponentTransfer",fecomposite:"feComposite",feconvolvematrix:"feConvolveMatrix",fediffuselighting:"feDiffuseLighting",fedisplacementmap:"feDisplacementMap",fedistantlight:"feDistantLight",fedropshadow:"feDropShadow",feflood:"feFlood",fefunca:"feFuncA",fefuncb:"feFuncB",fefuncg:"feFuncG",fefuncr:"feFuncR",fegaussianblur:"feGaussianBlur",feimage:"feImage",femerge:"feMerge",femergenode:"feMergeNode",femorphology:"feMorphology",feoffset:"feOffset",fepointlight:"fePointLight",fespecularlighting:"feSpecularLighting",fespotlight:"feSpotLight",fetile:"feTile",feturbulence:"feTurbulence",foreignobject:"foreignObject",glyphref:"glyphRef",lineargradient:"linearGradient",radialgradient:"radialGradient"};var y=/([^\\]):hover/g;function g(e){var t=d(e,{silent:!0});return t.stylesheet?(t.stylesheet.rules.forEach(function(t){"selectors"in t&&(t.selectors||[]).forEach(function(t){if(y.test(t)){var r=t.replace(y,"$1.\\:hover");e=e.replace(t,t+", "+r)}})}),e):e}function T(t,r,n){switch(t.type){case e.NodeType.Document:return r.implementation.createDocument(null,"",null);case e.NodeType.DocumentType:return r.implementation.createDocumentType(t.name,t.publicId,t.systemId);case e.NodeType.Element:var a,i=function(e){var t=v[e.tagName]?v[e.tagName]:e.tagName;return"link"===t&&e.attributes._cssText&&(t="style"),t}(t);a=t.isSVG?r.createElementNS("http://www.w3.org/2000/svg",i):r.createElement(i);var o=function(e){if(!t.attributes.hasOwnProperty(e))return"continue";var o=t.attributes[e];if(o="boolean"==typeof o||"number"==typeof o?"":o,e.startsWith("rr_")){if("canvas"===i&&"rr_dataURL"===e){var s=document.createElement("img");s.src=o,s.onload=function(){var e=a.getContext("2d");e&&e.drawImage(s,0,0,s.width,s.height)}}if("rr_width"===e&&(a.style.width=o),"rr_height"===e&&(a.style.height=o),"rr_mediaState"===e)switch(o){case"played":a.play();case"paused":a.pause()}}else{var c="textarea"===i&&"value"===e,u="style"===i&&"_cssText"===e;if(u&&n&&(o=g(o)),c||u){for(var f=r.createTextNode(o),l=0,p=Array.from(a.childNodes);l<p.length;l++){var m=p[l];m.nodeType===a.TEXT_NODE&&a.removeChild(m)}return a.appendChild(f),"continue"}if("iframe"===i&&"src"===e)return"continue";try{t.isSVG&&"xlink:href"===e?a.setAttributeNS("http://www.w3.org/1999/xlink",e,o):"onload"===e||"onclick"===e||"onmouse"===e.substring(0,7)?a.setAttribute("_"+e,o):a.setAttribute(e,o)}catch(e){}}};for(var s in t.attributes)o(s);return a;case e.NodeType.Text:return r.createTextNode(t.isStyle&&n?g(t.textContent):t.textContent);case e.NodeType.CDATA:return r.createCDATASection(t.textContent);case e.NodeType.Comment:return r.createComment(t.textContent);default:return null}}function N(t,r,n,a,i){void 0===a&&(a=!1),void 0===i&&(i=!0);var o=T(t,r,i);if(!o)return null;if(t.type===e.NodeType.Document&&(r.close(),r.open(),o=r),o.__sn=t,n[t.id]=o,(t.type===e.NodeType.Document||t.type===e.NodeType.Element)&&!a)for(var s=0,c=t.childNodes;s<c.length;s++){var u=c[s],f=N(u,r,n,!1,i);f?o.appendChild(f):console.warn("Failed to rebuild",u)}return o}return e.snapshot=function(e,t,r,n,a){void 0===t&&(t="rr-block"),void 0===r&&(r=!0);var i={};return[p(e,e,i,t,!1,r,!0===n?{color:!0,date:!0,"datetime-local":!0,email:!0,month:!0,number:!0,range:!0,search:!0,tel:!0,text:!0,time:!0,url:!0,week:!0,textarea:!0,select:!0}:!1===n?{}:n,a),i]},e.serializeNodeWithId=p,e.rebuild=function(t,r,n,a){void 0===a&&(a=!0);var i={},o=N(t,r,i,!1,a);return function(e,t){for(var r in e)e[r]&&(n=e[r],t(n));var n}(i,function(t){n&&n(t),function(t){var r=t.__sn;if(r.type===e.NodeType.Element){var n=t;for(var a in r.attributes)if(r.attributes.hasOwnProperty(a)&&a.startsWith("rr_")){var i=r.attributes[a];"rr_scrollLeft"===a&&(n.scrollLeft=i),"rr_scrollTop"===a&&(n.scrollTop=i)}}}(t)}),[o,i]},e.buildNodeWithSN=N,e.addHoverClass=g,e.transformAttribute=f,e.visitSnapshot=function(t,r){!function t(n){r(n),n.type!==e.NodeType.Document&&n.type!==e.NodeType.Element||n.childNodes.forEach(t)}(t)},e}({});
 //# sourceMappingURL=rrweb-snapshot.min.js.map

es/rrweb-snapshot.js

@@ -12,3 +12,3 @@ var NodeType;
 var _id = 1;
-var symbolAndNumberRegex = RegExp('[^a-z1-6-]');
+var tagNameRegex = RegExp('[^a-z1-6-_]');
 function genId() {
@@ -19,3 +19,3 @@ return _id++;
     var processedTagName = tagName.toLowerCase().trim();
-    if (symbolAndNumberRegex.test(processedTagName)) {
+    if (tagNameRegex.test(processedTagName)) {
         return 'div';
@@ -110,3 +110,3 @@ }
     })
-        .join(',');
+        .join(', ');
     return resultingSrcsetString;
@@ -139,3 +139,3 @@ }
 }
-function serializeNode(n, doc, blockClass, inlineStylesheet, maskInputOptions) {
+function serializeNode(n, doc, blockClass, inlineStylesheet, maskInputOptions, recordCanvas) {
     if (maskInputOptions === void 0) { maskInputOptions = {}; }
@@ -219,3 +219,3 @@ switch (n.nodeType) {
             }
-            if (tagName === 'canvas') {
+            if (tagName === 'canvas' && recordCanvas) {
                 attributes_1.rr_dataURL = n.toDataURL();
@@ -228,2 +228,8 @@ }
             }
+            if (n.scrollLeft) {
+                attributes_1.rr_scrollLeft = n.scrollLeft;
+            }
+            if (n.scrollTop) {
+                attributes_1.rr_scrollTop = n.scrollTop;
+            }
             if (needBlock_1) {
@@ -271,6 +277,6 @@ var _c = n.getBoundingClientRect(), width = _c.width, height = _c.height;
 }
-function serializeNodeWithId(n, doc, map, blockClass, skipChild, inlineStylesheet, maskInputOptions) {
+function serializeNodeWithId(n, doc, map, blockClass, skipChild, inlineStylesheet, maskInputOptions, recordCanvas) {
     if (skipChild === void 0) { skipChild = false; }
     if (inlineStylesheet === void 0) { inlineStylesheet = true; }
-    var _serializedNode = serializeNode(n, doc, blockClass, inlineStylesheet, maskInputOptions);
+    var _serializedNode = serializeNode(n, doc, blockClass, inlineStylesheet, maskInputOptions, recordCanvas || false);
     if (!_serializedNode) {
@@ -300,3 +306,3 @@ console.warn(n, 'not serialized');
             var childN = _a[_i];
-            var serializedChildNode = serializeNodeWithId(childN, doc, map, blockClass, skipChild, inlineStylesheet, maskInputOptions);
+            var serializedChildNode = serializeNodeWithId(childN, doc, map, blockClass, skipChild, inlineStylesheet, maskInputOptions, recordCanvas);
             if (serializedChildNode) {
@@ -309,3 +315,3 @@ serializedNode.childNodes.push(serializedChildNode);
 }
-function snapshot(n, blockClass, inlineStylesheet, maskAllInputsOrOptions) {
+function snapshot(n, blockClass, inlineStylesheet, maskAllInputsOrOptions, recordCanvas) {
     if (blockClass === void 0) { blockClass = 'rr-block'; }
@@ -328,3 +334,5 @@ if (inlineStylesheet === void 0) { inlineStylesheet = true; }
             url: true,
-            week: true
+            week: true,
+            textarea: true,
+            select: true
         }
@@ -335,6 +343,16 @@ : maskAllInputsOrOptions === false
     return [
-        serializeNodeWithId(n, n, idNodeMap, blockClass, false, inlineStylesheet, maskInputOptions),
+        serializeNodeWithId(n, n, idNodeMap, blockClass, false, inlineStylesheet, maskInputOptions, recordCanvas),
         idNodeMap,
     ];
 }
+function visitSnapshot(node, onVisit) {
+    function walk(current) {
+        onVisit(current);
+        if (current.type === NodeType.Document ||
+            current.type === NodeType.Element) {
+            current.childNodes.forEach(walk);
+        }
+    }
+    walk(node);
+}
 
@@ -865,3 +883,4 @@ var commentre = /\/\*[^*]*\*+([^/*][^*]*\*+)*\//g;
                 var value = n.attributes[name];
-                value = typeof value === 'boolean' ? '' : value;
+                value =
+                    typeof value === 'boolean' || typeof value === 'number' ? '' : value;
                 if (!name.startsWith('rr_')) {
@@ -891,3 +910,5 @@ var isTextarea = tagName === 'textarea' && name === 'value';
                         }
-                        else if (name == 'onload' || name == 'onclick' || name.substring(0, 7) == 'onmouse') {
+                        else if (name === 'onload' ||
+                            name === 'onclick' ||
+                            name.substring(0, 7) === 'onmouse') {
                             node_1.setAttribute('_' + name, value);
@@ -974,8 +995,44 @@ }
 }
-function rebuild(n, doc, HACK_CSS) {
+function visit(idNodeMap, onVisit) {
+    function walk(node) {
+        onVisit(node);
+    }
+    for (var key in idNodeMap) {
+        if (idNodeMap[key]) {
+            walk(idNodeMap[key]);
+        }
+    }
+}
+function handleScroll(node) {
+    var n = node.__sn;
+    if (n.type !== NodeType.Element) {
+        return;
+    }
+    var el = node;
+    for (var name in n.attributes) {
+        if (!(n.attributes.hasOwnProperty(name) && name.startsWith('rr_'))) {
+            continue;
+        }
+        var value = n.attributes[name];
+        if (name === 'rr_scrollLeft') {
+            el.scrollLeft = value;
+        }
+        if (name === 'rr_scrollTop') {
+            el.scrollTop = value;
+        }
+    }
+}
+function rebuild(n, doc, onVisit, HACK_CSS) {
     if (HACK_CSS === void 0) { HACK_CSS = true; }
     var idNodeMap = {};
-    return [buildNodeWithSN(n, doc, idNodeMap, false, HACK_CSS), idNodeMap];
+    var node = buildNodeWithSN(n, doc, idNodeMap, false, HACK_CSS);
+    visit(idNodeMap, function (visitedNode) {
+        if (onVisit) {
+            onVisit(visitedNode);
+        }
+        handleScroll(visitedNode);
+    });
+    return [node, idNodeMap];
 }
 
-export { snapshot, serializeNodeWithId, rebuild, buildNodeWithSN, addHoverClass, transformAttribute, NodeType };
+export { snapshot, serializeNodeWithId, rebuild, buildNodeWithSN, addHoverClass, transformAttribute, visitSnapshot, NodeType };

es/rrweb-snapshot.min.js

@@ -1,2 +0,2 @@
-var NodeType;!function(e){e[e.Document=0]="Document",e[e.DocumentType=1]="DocumentType",e[e.Element=2]="Element",e[e.Text=3]="Text",e[e.CDATA=4]="CDATA",e[e.Comment=5]="Comment"}(NodeType||(NodeType={}));var _id=1,symbolAndNumberRegex=RegExp("[^a-z1-6-]");function genId(){return _id++}function getValidTagName(e){var t=e.toLowerCase().trim();return symbolAndNumberRegex.test(t)?"div":t}function getCssRulesString(e){try{var t=e.rules||e.cssRules;return t?Array.from(t).reduce(function(e,t){return e+getCssRuleString(t)},""):null}catch(e){return null}}function getCssRuleString(e){return isCSSImportRule(e)?getCssRulesString(e.styleSheet)||"":e.cssText}function isCSSImportRule(e){return"styleSheet"in e}function extractOrigin(e){return(e.indexOf("//")>-1?e.split("/").slice(0,3).join("/"):e.split("/")[0]).split("?")[0]}var URL_IN_CSS_REF=/url\((?:'([^']*)'|"([^"]*)"|([^)]*))\)/gm,RELATIVE_PATH=/^(?!www\.|(?:http|ftp)s?:\/\/|[A-Za-z]:\\|\/\/).*/,DATA_URI=/^(data:)([\w\/\+\-]+);(charset=[\w-]+|base64).*,(.*)/i;function absoluteToStylesheet(e,t){return(e||"").replace(URL_IN_CSS_REF,function(e,r,n,i){var a=r||n||i;if(!a)return e;if(!RELATIVE_PATH.test(a))return"url('"+a+"')";if(DATA_URI.test(a))return"url("+a+")";if("/"===a[0])return"url('"+(extractOrigin(t)+a)+"')";var o=t.split("/"),s=a.split("/");o.pop();for(var u=0,c=s;u<c.length;u++){var l=c[u];"."!==l&&(".."===l?o.pop():o.push(l))}return"url('"+o.join("/")+"')"})}function getAbsoluteSrcsetString(e,t){return""===t.trim()?t:t.split(",").map(function(t){var r=t.trimLeft().trimRight().split(" ");return 2===r.length?absoluteToDoc(e,r[0])+" "+r[1]:1===r.length?""+absoluteToDoc(e,r[0]):""}).join(",")}function absoluteToDoc(e,t){if(!t||""===t.trim())return t;var r=e.createElement("a");return r.href=t,r.href}function isSVGElement(e){return"svg"===e.tagName||e instanceof SVGElement}function transformAttribute(e,t,r){return"src"===t||"href"===t&&r?absoluteToDoc(e,r):"srcset"===t&&r?getAbsoluteSrcsetString(e,r):"style"===t&&r?absoluteToStylesheet(r,location.href):r}function serializeNode(e,t,r,n,i){switch(void 0===i&&(i={}),e.nodeType){case e.DOCUMENT_NODE:return{type:NodeType.Document,childNodes:[]};case e.DOCUMENT_TYPE_NODE:return{type:NodeType.DocumentType,name:e.name,publicId:e.publicId,systemId:e.systemId};case e.ELEMENT_NODE:var a=!1;"string"==typeof r?a=e.classList.contains(r):e.classList.forEach(function(e){r.test(e)&&(a=!0)});for(var o=getValidTagName(e.tagName),s={},u=0,c=Array.from(e.attributes);u<c.length;u++){var l=c[u],f=l.name,d=l.value;s[f]=transformAttribute(t,f,d)}if("link"===o&&n){var m,p=Array.from(t.styleSheets).find(function(t){return t.href===e.href});(m=getCssRulesString(p))&&(delete s.rel,delete s.href,s._cssText=absoluteToStylesheet(m,p.href))}if("style"===o&&e.sheet&&!(e.innerText||e.textContent||"").trim().length)(m=getCssRulesString(e.sheet))&&(s._cssText=absoluteToStylesheet(m,location.href));if("input"===o||"textarea"===o||"select"===o){d=e.value;"radio"!==s.type&&"checkbox"!==s.type&&"submit"!==s.type&&"button"!==s.type&&d?s.value=i[s.type]||i[o]?"*".repeat(d.length):d:e.checked&&(s.checked=e.checked)}if("option"===o){var h=e.parentElement;s.value===h.value&&(s.selected=e.selected)}if("canvas"===o&&(s.rr_dataURL=e.toDataURL()),"audio"!==o&&"video"!==o||(s.rr_mediaState=e.paused?"paused":"played"),a){var g=e.getBoundingClientRect(),v=g.width,y=g.height;s.rr_width=v+"px",s.rr_height=y+"px"}return{type:NodeType.Element,tagName:o,attributes:s,childNodes:[],isSVG:isSVGElement(e)||void 0,needBlock:a};case e.TEXT_NODE:var T=e.parentNode&&e.parentNode.tagName,N=e.textContent,b="STYLE"===T||void 0;return b&&N&&(N=absoluteToStylesheet(N,location.href)),"SCRIPT"===T&&(N="SCRIPT_PLACEHOLDER"),{type:NodeType.Text,textContent:N||"",isStyle:b};case e.CDATA_SECTION_NODE:return{type:NodeType.CDATA,textContent:""};case e.COMMENT_NODE:return{type:NodeType.Comment,textContent:e.textContent||""};default:return!1}}function serializeNodeWithId(e,t,r,n,i,a,o){void 0===i&&(i=!1),void 0===a&&(a=!0);var s,u=serializeNode(e,t,n,a,o);if(!u)return console.warn(e,"not serialized"),null;s="__sn"in e?e.__sn.id:genId();var c=Object.assign(u,{id:s});e.__sn=c,r[s]=e;var l=!i;if(c.type===NodeType.Element&&(l=l&&!c.needBlock,delete c.needBlock),(c.type===NodeType.Document||c.type===NodeType.Element)&&l)for(var f=0,d=Array.from(e.childNodes);f<d.length;f++){var m=serializeNodeWithId(d[f],t,r,n,i,a,o);m&&c.childNodes.push(m)}return c}function snapshot(e,t,r,n){void 0===t&&(t="rr-block"),void 0===r&&(r=!0);var i={};return[serializeNodeWithId(e,e,i,t,!1,r,!0===n?{color:!0,date:!0,"datetime-local":!0,email:!0,month:!0,number:!0,range:!0,search:!0,tel:!0,text:!0,time:!0,url:!0,week:!0}:!1===n?{}:n),i]}var commentre=/\/\*[^*]*\*+([^\/*][^*]*\*+)*\//g;function parse(e,t){void 0===t&&(t={});var r=1,n=1;function i(e){var t=e.match(/\n/g);t&&(r+=t.length);var i=e.lastIndexOf("\n");n=-1===i?n+e.length:e.length-i}function a(){var e={line:r,column:n};return function(t){return t.position=new o(e),m(),t}}var o=function(){return function(e){this.start=e,this.end={line:r,column:n},this.source=t.source}}();o.prototype.content=e;var s=[];function u(i){var a=new Error(t.source+":"+r+":"+n+": "+i);if(a.reason=i,a.filename=t.source,a.line=r,a.column=n,a.source=e,!t.silent)throw a;s.push(a)}function c(){return d(/^{\s*/)}function l(){return d(/^}/)}function f(){var t,r=[];for(m(),p(r);e.length&&"}"!==e.charAt(0)&&(t=_()||A());)!1!==t&&(r.push(t),p(r));return r}function d(t){var r=t.exec(e);if(r){var n=r[0];return i(n),e=e.slice(n.length),r}}function m(){d(/^\s*/)}function p(e){var t;for(void 0===e&&(e=[]);t=h();)!1!==t&&e.push(t),t=h();return e}function h(){var t=a();if("/"===e.charAt(0)&&"*"===e.charAt(1)){for(var r=2;""!==e.charAt(r)&&("*"!==e.charAt(r)||"/"!==e.charAt(r+1));)++r;if(r+=2,""===e.charAt(r-1))return u("End of comment missing");var o=e.slice(2,r-2);return n+=2,i(o),e=e.slice(r),n+=2,t({type:"comment",comment:o})}}function g(){var e=d(/^([^{]+)/);if(e)return trim(e[0]).replace(/\/\*([^*]|[\r\n]|(\*+([^*\/]|[\r\n])))*\*\/+/g,"").replace(/"(?:\\"|[^"])*"|'(?:\\'|[^'])*'/g,function(e){return e.replace(/,/g,"‌")}).split(/\s*(?![^(]*\)),\s*/).map(function(e){return e.replace(/\u200C/g,",")})}function v(){var e=a(),t=d(/^(\*?[-#\/\*\\\w]+(\[[0-9a-z_-]+\])?)\s*/);if(t){var r=trim(t[0]);if(!d(/^:\s*/))return u("property missing ':'");var n=d(/^((?:'(?:\\'|.)*?'|"(?:\\"|.)*?"|\([^\)]*?\)|[^};])+)/),i=e({type:"declaration",property:r.replace(commentre,""),value:n?trim(n[0]).replace(commentre,""):""});return d(/^[;\s]*/),i}}function y(){var e,t=[];if(!c())return u("missing '{'");for(p(t);e=v();)!1!==e&&(t.push(e),p(t)),e=v();return l()?t:u("missing '}'")}function T(){for(var e,t=[],r=a();e=d(/^((\d+\.\d+|\.\d+|\d+)%?|[a-z]+)\s*/);)t.push(e[1]),d(/^,\s*/);if(t.length)return r({type:"keyframe",values:t,declarations:y()})}var N,b=S("import"),E=S("charset"),C=S("namespace");function S(e){var t=new RegExp("^@"+e+"\\s*([^;]+);");return function(){var r=a(),n=d(t);if(n){var i={type:e};return i[e]=n[1].trim(),r(i)}}}function _(){if("@"===e[0])return function(){var e=a(),t=d(/^@([-\w]+)?keyframes\s*/);if(t){var r=t[1];if(!(t=d(/^([-\w]+)\s*/)))return u("@keyframes missing name");var n,i=t[1];if(!c())return u("@keyframes missing '{'");for(var o=p();n=T();)o.push(n),o=o.concat(p());return l()?e({type:"keyframes",name:i,vendor:r,keyframes:o}):u("@keyframes missing '}'")}}()||function(){var e=a(),t=d(/^@media *([^{]+)/);if(t){var r=trim(t[1]);if(!c())return u("@media missing '{'");var n=p().concat(f());return l()?e({type:"media",media:r,rules:n}):u("@media missing '}'")}}()||function(){var e=a(),t=d(/^@custom-media\s+(--[^\s]+)\s*([^{;]+);/);if(t)return e({type:"custom-media",name:trim(t[1]),media:trim(t[2])})}()||function(){var e=a(),t=d(/^@supports *([^{]+)/);if(t){var r=trim(t[1]);if(!c())return u("@supports missing '{'");var n=p().concat(f());return l()?e({type:"supports",supports:r,rules:n}):u("@supports missing '}'")}}()||b()||E()||C()||function(){var e=a(),t=d(/^@([-\w]+)?document *([^{]+)/);if(t){var r=trim(t[1]),n=trim(t[2]);if(!c())return u("@document missing '{'");var i=p().concat(f());return l()?e({type:"document",document:n,vendor:r,rules:i}):u("@document missing '}'")}}()||function(){var e=a();if(d(/^@page */)){var t=g()||[];if(!c())return u("@page missing '{'");for(var r,n=p();r=v();)n.push(r),n=n.concat(p());return l()?e({type:"page",selectors:t,declarations:n}):u("@page missing '}'")}}()||function(){var e=a();if(d(/^@host\s*/)){if(!c())return u("@host missing '{'");var t=p().concat(f());return l()?e({type:"host",rules:t}):u("@host missing '}'")}}()||function(){var e=a();if(d(/^@font-face\s*/)){if(!c())return u("@font-face missing '{'");for(var t,r=p();t=v();)r.push(t),r=r.concat(p());return l()?e({type:"font-face",declarations:r}):u("@font-face missing '}'")}}()}function A(){var e=a(),t=g();return t?(p(),e({type:"rule",selectors:t,declarations:y()})):u("selector missing")}return addParent((N=f(),{type:"stylesheet",stylesheet:{source:t.source,rules:N,parsingErrors:s}}))}function trim(e){return e?e.replace(/^\s+|\s+$/g,""):""}function addParent(e,t){for(var r=e&&"string"==typeof e.type,n=r?e:t,i=0,a=Object.keys(e);i<a.length;i++){var o=e[a[i]];Array.isArray(o)?o.forEach(function(e){addParent(e,n)}):o&&"object"==typeof o&&addParent(o,n)}return r&&Object.defineProperty(e,"parent",{configurable:!0,writable:!0,enumerable:!1,value:t||null}),e}var tagMap={script:"noscript",altglyph:"altGlyph",altglyphdef:"altGlyphDef",altglyphitem:"altGlyphItem",animatecolor:"animateColor",animatemotion:"animateMotion",animatetransform:"animateTransform",clippath:"clipPath",feblend:"feBlend",fecolormatrix:"feColorMatrix",fecomponenttransfer:"feComponentTransfer",fecomposite:"feComposite",feconvolvematrix:"feConvolveMatrix",fediffuselighting:"feDiffuseLighting",fedisplacementmap:"feDisplacementMap",fedistantlight:"feDistantLight",fedropshadow:"feDropShadow",feflood:"feFlood",fefunca:"feFuncA",fefuncb:"feFuncB",fefuncg:"feFuncG",fefuncr:"feFuncR",fegaussianblur:"feGaussianBlur",feimage:"feImage",femerge:"feMerge",femergenode:"feMergeNode",femorphology:"feMorphology",feoffset:"feOffset",fepointlight:"fePointLight",fespecularlighting:"feSpecularLighting",fespotlight:"feSpotLight",fetile:"feTile",feturbulence:"feTurbulence",foreignobject:"foreignObject",glyphref:"glyphRef",lineargradient:"linearGradient",radialgradient:"radialGradient"};function getTagName(e){var t=tagMap[e.tagName]?tagMap[e.tagName]:e.tagName;return"link"===t&&e.attributes._cssText&&(t="style"),t}var HOVER_SELECTOR=/([^\\]):hover/g;function addHoverClass(e){var t=parse(e,{silent:!0});return t.stylesheet?(t.stylesheet.rules.forEach(function(t){"selectors"in t&&(t.selectors||[]).forEach(function(t){if(HOVER_SELECTOR.test(t)){var r=t.replace(HOVER_SELECTOR,"$1.\\:hover");e=e.replace(t,t+", "+r)}})}),e):e}function buildNode(e,t,r){switch(e.type){case NodeType.Document:return t.implementation.createDocument(null,"",null);case NodeType.DocumentType:return t.implementation.createDocumentType(e.name,e.publicId,e.systemId);case NodeType.Element:var n,i=getTagName(e);n=e.isSVG?t.createElementNS("http://www.w3.org/2000/svg",i):t.createElement(i);var a=function(a){if(!e.attributes.hasOwnProperty(a))return"continue";var o=e.attributes[a];if(o="boolean"==typeof o?"":o,a.startsWith("rr_")){if("canvas"===i&&"rr_dataURL"===a){var s=document.createElement("img");s.src=o,s.onload=function(){var e=n.getContext("2d");e&&e.drawImage(s,0,0,s.width,s.height)}}if("rr_width"===a&&(n.style.width=o),"rr_height"===a&&(n.style.height=o),"rr_mediaState"===a)switch(o){case"played":n.play();case"paused":n.pause()}}else{var u="textarea"===i&&"value"===a,c="style"===i&&"_cssText"===a;if(c&&r&&(o=addHoverClass(o)),u||c){for(var l=t.createTextNode(o),f=0,d=Array.from(n.childNodes);f<d.length;f++){var m=d[f];m.nodeType===n.TEXT_NODE&&n.removeChild(m)}return n.appendChild(l),"continue"}if("iframe"===i&&"src"===a)return"continue";try{e.isSVG&&"xlink:href"===a?n.setAttributeNS("http://www.w3.org/1999/xlink",a,o):"onload"==a||"onclick"==a||"onmouse"==a.substring(0,7)?n.setAttribute("_"+a,o):n.setAttribute(a,o)}catch(e){}}};for(var o in e.attributes)a(o);return n;case NodeType.Text:return t.createTextNode(e.isStyle&&r?addHoverClass(e.textContent):e.textContent);case NodeType.CDATA:return t.createCDATASection(e.textContent);case NodeType.Comment:return t.createComment(e.textContent);default:return null}}function buildNodeWithSN(e,t,r,n,i){void 0===n&&(n=!1),void 0===i&&(i=!0);var a=buildNode(e,t,i);if(!a)return null;if(e.type===NodeType.Document&&(t.close(),t.open(),a=t),a.__sn=e,r[e.id]=a,(e.type===NodeType.Document||e.type===NodeType.Element)&&!n)for(var o=0,s=e.childNodes;o<s.length;o++){var u=s[o],c=buildNodeWithSN(u,t,r,!1,i);c?a.appendChild(c):console.warn("Failed to rebuild",u)}return a}function rebuild(e,t,r){void 0===r&&(r=!0);var n={};return[buildNodeWithSN(e,t,n,!1,r),n]}export{snapshot,serializeNodeWithId,rebuild,buildNodeWithSN,addHoverClass,transformAttribute,NodeType};
+var NodeType;!function(e){e[e.Document=0]="Document",e[e.DocumentType=1]="DocumentType",e[e.Element=2]="Element",e[e.Text=3]="Text",e[e.CDATA=4]="CDATA",e[e.Comment=5]="Comment"}(NodeType||(NodeType={}));var _id=1,tagNameRegex=RegExp("[^a-z1-6-_]");function genId(){return _id++}function getValidTagName(e){var t=e.toLowerCase().trim();return tagNameRegex.test(t)?"div":t}function getCssRulesString(e){try{var t=e.rules||e.cssRules;return t?Array.from(t).reduce(function(e,t){return e+getCssRuleString(t)},""):null}catch(e){return null}}function getCssRuleString(e){return isCSSImportRule(e)?getCssRulesString(e.styleSheet)||"":e.cssText}function isCSSImportRule(e){return"styleSheet"in e}function extractOrigin(e){return(e.indexOf("//")>-1?e.split("/").slice(0,3).join("/"):e.split("/")[0]).split("?")[0]}var URL_IN_CSS_REF=/url\((?:'([^']*)'|"([^"]*)"|([^)]*))\)/gm,RELATIVE_PATH=/^(?!www\.|(?:http|ftp)s?:\/\/|[A-Za-z]:\\|\/\/).*/,DATA_URI=/^(data:)([\w\/\+\-]+);(charset=[\w-]+|base64).*,(.*)/i;function absoluteToStylesheet(e,t){return(e||"").replace(URL_IN_CSS_REF,function(e,r,n,i){var a=r||n||i;if(!a)return e;if(!RELATIVE_PATH.test(a))return"url('"+a+"')";if(DATA_URI.test(a))return"url("+a+")";if("/"===a[0])return"url('"+(extractOrigin(t)+a)+"')";var o=t.split("/"),s=a.split("/");o.pop();for(var u=0,l=s;u<l.length;u++){var c=l[u];"."!==c&&(".."===c?o.pop():o.push(c))}return"url('"+o.join("/")+"')"})}function getAbsoluteSrcsetString(e,t){return""===t.trim()?t:t.split(",").map(function(t){var r=t.trimLeft().trimRight().split(" ");return 2===r.length?absoluteToDoc(e,r[0])+" "+r[1]:1===r.length?""+absoluteToDoc(e,r[0]):""}).join(", ")}function absoluteToDoc(e,t){if(!t||""===t.trim())return t;var r=e.createElement("a");return r.href=t,r.href}function isSVGElement(e){return"svg"===e.tagName||e instanceof SVGElement}function transformAttribute(e,t,r){return"src"===t||"href"===t&&r?absoluteToDoc(e,r):"srcset"===t&&r?getAbsoluteSrcsetString(e,r):"style"===t&&r?absoluteToStylesheet(r,location.href):r}function serializeNode(e,t,r,n,i,a){switch(void 0===i&&(i={}),e.nodeType){case e.DOCUMENT_NODE:return{type:NodeType.Document,childNodes:[]};case e.DOCUMENT_TYPE_NODE:return{type:NodeType.DocumentType,name:e.name,publicId:e.publicId,systemId:e.systemId};case e.ELEMENT_NODE:var o=!1;"string"==typeof r?o=e.classList.contains(r):e.classList.forEach(function(e){r.test(e)&&(o=!0)});for(var s=getValidTagName(e.tagName),u={},l=0,c=Array.from(e.attributes);l<c.length;l++){var f=c[l],p=f.name,d=f.value;u[p]=transformAttribute(t,p,d)}if("link"===s&&n){var m,h=Array.from(t.styleSheets).find(function(t){return t.href===e.href});(m=getCssRulesString(h))&&(delete u.rel,delete u.href,u._cssText=absoluteToStylesheet(m,h.href))}if("style"===s&&e.sheet&&!(e.innerText||e.textContent||"").trim().length)(m=getCssRulesString(e.sheet))&&(u._cssText=absoluteToStylesheet(m,location.href));if("input"===s||"textarea"===s||"select"===s){d=e.value;"radio"!==u.type&&"checkbox"!==u.type&&"submit"!==u.type&&"button"!==u.type&&d?u.value=i[u.type]||i[s]?"*".repeat(d.length):d:e.checked&&(u.checked=e.checked)}if("option"===s){var g=e.parentElement;u.value===g.value&&(u.selected=e.selected)}if("canvas"===s&&a&&(u.rr_dataURL=e.toDataURL()),"audio"!==s&&"video"!==s||(u.rr_mediaState=e.paused?"paused":"played"),e.scrollLeft&&(u.rr_scrollLeft=e.scrollLeft),e.scrollTop&&(u.rr_scrollTop=e.scrollTop),o){var v=e.getBoundingClientRect(),y=v.width,T=v.height;u.rr_width=y+"px",u.rr_height=T+"px"}return{type:NodeType.Element,tagName:s,attributes:u,childNodes:[],isSVG:isSVGElement(e)||void 0,needBlock:o};case e.TEXT_NODE:var N=e.parentNode&&e.parentNode.tagName,E=e.textContent,b="STYLE"===N||void 0;return b&&E&&(E=absoluteToStylesheet(E,location.href)),"SCRIPT"===N&&(E="SCRIPT_PLACEHOLDER"),{type:NodeType.Text,textContent:E||"",isStyle:b};case e.CDATA_SECTION_NODE:return{type:NodeType.CDATA,textContent:""};case e.COMMENT_NODE:return{type:NodeType.Comment,textContent:e.textContent||""};default:return!1}}function serializeNodeWithId(e,t,r,n,i,a,o,s){void 0===i&&(i=!1),void 0===a&&(a=!0);var u,l=serializeNode(e,t,n,a,o,s||!1);if(!l)return console.warn(e,"not serialized"),null;u="__sn"in e?e.__sn.id:genId();var c=Object.assign(l,{id:u});e.__sn=c,r[u]=e;var f=!i;if(c.type===NodeType.Element&&(f=f&&!c.needBlock,delete c.needBlock),(c.type===NodeType.Document||c.type===NodeType.Element)&&f)for(var p=0,d=Array.from(e.childNodes);p<d.length;p++){var m=serializeNodeWithId(d[p],t,r,n,i,a,o,s);m&&c.childNodes.push(m)}return c}function snapshot(e,t,r,n,i){void 0===t&&(t="rr-block"),void 0===r&&(r=!0);var a={};return[serializeNodeWithId(e,e,a,t,!1,r,!0===n?{color:!0,date:!0,"datetime-local":!0,email:!0,month:!0,number:!0,range:!0,search:!0,tel:!0,text:!0,time:!0,url:!0,week:!0,textarea:!0,select:!0}:!1===n?{}:n,i),a]}function visitSnapshot(e,t){!function e(r){t(r),r.type!==NodeType.Document&&r.type!==NodeType.Element||r.childNodes.forEach(e)}(e)}var commentre=/\/\*[^*]*\*+([^\/*][^*]*\*+)*\//g;function parse(e,t){void 0===t&&(t={});var r=1,n=1;function i(e){var t=e.match(/\n/g);t&&(r+=t.length);var i=e.lastIndexOf("\n");n=-1===i?n+e.length:e.length-i}function a(){var e={line:r,column:n};return function(t){return t.position=new o(e),d(),t}}var o=function(){return function(e){this.start=e,this.end={line:r,column:n},this.source=t.source}}();o.prototype.content=e;var s=[];function u(i){var a=new Error(t.source+":"+r+":"+n+": "+i);if(a.reason=i,a.filename=t.source,a.line=r,a.column=n,a.source=e,!t.silent)throw a;s.push(a)}function l(){return p(/^{\s*/)}function c(){return p(/^}/)}function f(){var t,r=[];for(d(),m(r);e.length&&"}"!==e.charAt(0)&&(t=_()||x());)!1!==t&&(r.push(t),m(r));return r}function p(t){var r=t.exec(e);if(r){var n=r[0];return i(n),e=e.slice(n.length),r}}function d(){p(/^\s*/)}function m(e){var t;for(void 0===e&&(e=[]);t=h();)!1!==t&&e.push(t),t=h();return e}function h(){var t=a();if("/"===e.charAt(0)&&"*"===e.charAt(1)){for(var r=2;""!==e.charAt(r)&&("*"!==e.charAt(r)||"/"!==e.charAt(r+1));)++r;if(r+=2,""===e.charAt(r-1))return u("End of comment missing");var o=e.slice(2,r-2);return n+=2,i(o),e=e.slice(r),n+=2,t({type:"comment",comment:o})}}function g(){var e=p(/^([^{]+)/);if(e)return trim(e[0]).replace(/\/\*([^*]|[\r\n]|(\*+([^*\/]|[\r\n])))*\*\/+/g,"").replace(/"(?:\\"|[^"])*"|'(?:\\'|[^'])*'/g,function(e){return e.replace(/,/g,"‌")}).split(/\s*(?![^(]*\)),\s*/).map(function(e){return e.replace(/\u200C/g,",")})}function v(){var e=a(),t=p(/^(\*?[-#\/\*\\\w]+(\[[0-9a-z_-]+\])?)\s*/);if(t){var r=trim(t[0]);if(!p(/^:\s*/))return u("property missing ':'");var n=p(/^((?:'(?:\\'|.)*?'|"(?:\\"|.)*?"|\([^\)]*?\)|[^};])+)/),i=e({type:"declaration",property:r.replace(commentre,""),value:n?trim(n[0]).replace(commentre,""):""});return p(/^[;\s]*/),i}}function y(){var e,t=[];if(!l())return u("missing '{'");for(m(t);e=v();)!1!==e&&(t.push(e),m(t)),e=v();return c()?t:u("missing '}'")}function T(){for(var e,t=[],r=a();e=p(/^((\d+\.\d+|\.\d+|\d+)%?|[a-z]+)\s*/);)t.push(e[1]),p(/^,\s*/);if(t.length)return r({type:"keyframe",values:t,declarations:y()})}var N,E=S("import"),b=S("charset"),C=S("namespace");function S(e){var t=new RegExp("^@"+e+"\\s*([^;]+);");return function(){var r=a(),n=p(t);if(n){var i={type:e};return i[e]=n[1].trim(),r(i)}}}function _(){if("@"===e[0])return function(){var e=a(),t=p(/^@([-\w]+)?keyframes\s*/);if(t){var r=t[1];if(!(t=p(/^([-\w]+)\s*/)))return u("@keyframes missing name");var n,i=t[1];if(!l())return u("@keyframes missing '{'");for(var o=m();n=T();)o.push(n),o=o.concat(m());return c()?e({type:"keyframes",name:i,vendor:r,keyframes:o}):u("@keyframes missing '}'")}}()||function(){var e=a(),t=p(/^@media *([^{]+)/);if(t){var r=trim(t[1]);if(!l())return u("@media missing '{'");var n=m().concat(f());return c()?e({type:"media",media:r,rules:n}):u("@media missing '}'")}}()||function(){var e=a(),t=p(/^@custom-media\s+(--[^\s]+)\s*([^{;]+);/);if(t)return e({type:"custom-media",name:trim(t[1]),media:trim(t[2])})}()||function(){var e=a(),t=p(/^@supports *([^{]+)/);if(t){var r=trim(t[1]);if(!l())return u("@supports missing '{'");var n=m().concat(f());return c()?e({type:"supports",supports:r,rules:n}):u("@supports missing '}'")}}()||E()||b()||C()||function(){var e=a(),t=p(/^@([-\w]+)?document *([^{]+)/);if(t){var r=trim(t[1]),n=trim(t[2]);if(!l())return u("@document missing '{'");var i=m().concat(f());return c()?e({type:"document",document:n,vendor:r,rules:i}):u("@document missing '}'")}}()||function(){var e=a();if(p(/^@page */)){var t=g()||[];if(!l())return u("@page missing '{'");for(var r,n=m();r=v();)n.push(r),n=n.concat(m());return c()?e({type:"page",selectors:t,declarations:n}):u("@page missing '}'")}}()||function(){var e=a();if(p(/^@host\s*/)){if(!l())return u("@host missing '{'");var t=m().concat(f());return c()?e({type:"host",rules:t}):u("@host missing '}'")}}()||function(){var e=a();if(p(/^@font-face\s*/)){if(!l())return u("@font-face missing '{'");for(var t,r=m();t=v();)r.push(t),r=r.concat(m());return c()?e({type:"font-face",declarations:r}):u("@font-face missing '}'")}}()}function x(){var e=a(),t=g();return t?(m(),e({type:"rule",selectors:t,declarations:y()})):u("selector missing")}return addParent((N=f(),{type:"stylesheet",stylesheet:{source:t.source,rules:N,parsingErrors:s}}))}function trim(e){return e?e.replace(/^\s+|\s+$/g,""):""}function addParent(e,t){for(var r=e&&"string"==typeof e.type,n=r?e:t,i=0,a=Object.keys(e);i<a.length;i++){var o=e[a[i]];Array.isArray(o)?o.forEach(function(e){addParent(e,n)}):o&&"object"==typeof o&&addParent(o,n)}return r&&Object.defineProperty(e,"parent",{configurable:!0,writable:!0,enumerable:!1,value:t||null}),e}var tagMap={script:"noscript",altglyph:"altGlyph",altglyphdef:"altGlyphDef",altglyphitem:"altGlyphItem",animatecolor:"animateColor",animatemotion:"animateMotion",animatetransform:"animateTransform",clippath:"clipPath",feblend:"feBlend",fecolormatrix:"feColorMatrix",fecomponenttransfer:"feComponentTransfer",fecomposite:"feComposite",feconvolvematrix:"feConvolveMatrix",fediffuselighting:"feDiffuseLighting",fedisplacementmap:"feDisplacementMap",fedistantlight:"feDistantLight",fedropshadow:"feDropShadow",feflood:"feFlood",fefunca:"feFuncA",fefuncb:"feFuncB",fefuncg:"feFuncG",fefuncr:"feFuncR",fegaussianblur:"feGaussianBlur",feimage:"feImage",femerge:"feMerge",femergenode:"feMergeNode",femorphology:"feMorphology",feoffset:"feOffset",fepointlight:"fePointLight",fespecularlighting:"feSpecularLighting",fespotlight:"feSpotLight",fetile:"feTile",feturbulence:"feTurbulence",foreignobject:"foreignObject",glyphref:"glyphRef",lineargradient:"linearGradient",radialgradient:"radialGradient"};function getTagName(e){var t=tagMap[e.tagName]?tagMap[e.tagName]:e.tagName;return"link"===t&&e.attributes._cssText&&(t="style"),t}var HOVER_SELECTOR=/([^\\]):hover/g;function addHoverClass(e){var t=parse(e,{silent:!0});return t.stylesheet?(t.stylesheet.rules.forEach(function(t){"selectors"in t&&(t.selectors||[]).forEach(function(t){if(HOVER_SELECTOR.test(t)){var r=t.replace(HOVER_SELECTOR,"$1.\\:hover");e=e.replace(t,t+", "+r)}})}),e):e}function buildNode(e,t,r){switch(e.type){case NodeType.Document:return t.implementation.createDocument(null,"",null);case NodeType.DocumentType:return t.implementation.createDocumentType(e.name,e.publicId,e.systemId);case NodeType.Element:var n,i=getTagName(e);n=e.isSVG?t.createElementNS("http://www.w3.org/2000/svg",i):t.createElement(i);var a=function(a){if(!e.attributes.hasOwnProperty(a))return"continue";var o=e.attributes[a];if(o="boolean"==typeof o||"number"==typeof o?"":o,a.startsWith("rr_")){if("canvas"===i&&"rr_dataURL"===a){var s=document.createElement("img");s.src=o,s.onload=function(){var e=n.getContext("2d");e&&e.drawImage(s,0,0,s.width,s.height)}}if("rr_width"===a&&(n.style.width=o),"rr_height"===a&&(n.style.height=o),"rr_mediaState"===a)switch(o){case"played":n.play();case"paused":n.pause()}}else{var u="textarea"===i&&"value"===a,l="style"===i&&"_cssText"===a;if(l&&r&&(o=addHoverClass(o)),u||l){for(var c=t.createTextNode(o),f=0,p=Array.from(n.childNodes);f<p.length;f++){var d=p[f];d.nodeType===n.TEXT_NODE&&n.removeChild(d)}return n.appendChild(c),"continue"}if("iframe"===i&&"src"===a)return"continue";try{e.isSVG&&"xlink:href"===a?n.setAttributeNS("http://www.w3.org/1999/xlink",a,o):"onload"===a||"onclick"===a||"onmouse"===a.substring(0,7)?n.setAttribute("_"+a,o):n.setAttribute(a,o)}catch(e){}}};for(var o in e.attributes)a(o);return n;case NodeType.Text:return t.createTextNode(e.isStyle&&r?addHoverClass(e.textContent):e.textContent);case NodeType.CDATA:return t.createCDATASection(e.textContent);case NodeType.Comment:return t.createComment(e.textContent);default:return null}}function buildNodeWithSN(e,t,r,n,i){void 0===n&&(n=!1),void 0===i&&(i=!0);var a=buildNode(e,t,i);if(!a)return null;if(e.type===NodeType.Document&&(t.close(),t.open(),a=t),a.__sn=e,r[e.id]=a,(e.type===NodeType.Document||e.type===NodeType.Element)&&!n)for(var o=0,s=e.childNodes;o<s.length;o++){var u=s[o],l=buildNodeWithSN(u,t,r,!1,i);l?a.appendChild(l):console.warn("Failed to rebuild",u)}return a}function visit(e,t){for(var r in e)e[r]&&(n=e[r],t(n));var n}function handleScroll(e){var t=e.__sn;if(t.type===NodeType.Element){var r=e;for(var n in t.attributes)if(t.attributes.hasOwnProperty(n)&&n.startsWith("rr_")){var i=t.attributes[n];"rr_scrollLeft"===n&&(r.scrollLeft=i),"rr_scrollTop"===n&&(r.scrollTop=i)}}}function rebuild(e,t,r,n){void 0===n&&(n=!0);var i={},a=buildNodeWithSN(e,t,i,!1,n);return visit(i,function(e){r&&r(e),handleScroll(e)}),[a,i]}export{snapshot,serializeNodeWithId,rebuild,buildNodeWithSN,addHoverClass,transformAttribute,visitSnapshot,NodeType};
 //# sourceMappingURL=rrweb-snapshot.min.js.map

lib/rrweb-snapshot.js

@@ -15,3 +15,3 @@ 'use strict';
 var _id = 1;
-var symbolAndNumberRegex = RegExp('[^a-z1-6-]');
+var tagNameRegex = RegExp('[^a-z1-6-_]');
 function genId() {
@@ -22,3 +22,3 @@ return _id++;
     var processedTagName = tagName.toLowerCase().trim();
-    if (symbolAndNumberRegex.test(processedTagName)) {
+    if (tagNameRegex.test(processedTagName)) {
         return 'div';
@@ -113,3 +113,3 @@ }
     })
-        .join(',');
+        .join(', ');
     return resultingSrcsetString;
@@ -142,3 +142,3 @@ }
 }
-function serializeNode(n, doc, blockClass, inlineStylesheet, maskInputOptions) {
+function serializeNode(n, doc, blockClass, inlineStylesheet, maskInputOptions, recordCanvas) {
     if (maskInputOptions === void 0) { maskInputOptions = {}; }
@@ -222,3 +222,3 @@ switch (n.nodeType) {
             }
-            if (tagName === 'canvas') {
+            if (tagName === 'canvas' && recordCanvas) {
                 attributes_1.rr_dataURL = n.toDataURL();
@@ -231,2 +231,8 @@ }
             }
+            if (n.scrollLeft) {
+                attributes_1.rr_scrollLeft = n.scrollLeft;
+            }
+            if (n.scrollTop) {
+                attributes_1.rr_scrollTop = n.scrollTop;
+            }
             if (needBlock_1) {
@@ -274,6 +280,6 @@ var _c = n.getBoundingClientRect(), width = _c.width, height = _c.height;
 }
-function serializeNodeWithId(n, doc, map, blockClass, skipChild, inlineStylesheet, maskInputOptions) {
+function serializeNodeWithId(n, doc, map, blockClass, skipChild, inlineStylesheet, maskInputOptions, recordCanvas) {
     if (skipChild === void 0) { skipChild = false; }
     if (inlineStylesheet === void 0) { inlineStylesheet = true; }
-    var _serializedNode = serializeNode(n, doc, blockClass, inlineStylesheet, maskInputOptions);
+    var _serializedNode = serializeNode(n, doc, blockClass, inlineStylesheet, maskInputOptions, recordCanvas || false);
     if (!_serializedNode) {
@@ -303,3 +309,3 @@ console.warn(n, 'not serialized');
             var childN = _a[_i];
-            var serializedChildNode = serializeNodeWithId(childN, doc, map, blockClass, skipChild, inlineStylesheet, maskInputOptions);
+            var serializedChildNode = serializeNodeWithId(childN, doc, map, blockClass, skipChild, inlineStylesheet, maskInputOptions, recordCanvas);
             if (serializedChildNode) {
@@ -312,3 +318,3 @@ serializedNode.childNodes.push(serializedChildNode);
 }
-function snapshot(n, blockClass, inlineStylesheet, maskAllInputsOrOptions) {
+function snapshot(n, blockClass, inlineStylesheet, maskAllInputsOrOptions, recordCanvas) {
     if (blockClass === void 0) { blockClass = 'rr-block'; }
@@ -331,3 +337,5 @@ if (inlineStylesheet === void 0) { inlineStylesheet = true; }
             url: true,
-            week: true
+            week: true,
+            textarea: true,
+            select: true
         }
@@ -338,6 +346,16 @@ : maskAllInputsOrOptions === false
     return [
-        serializeNodeWithId(n, n, idNodeMap, blockClass, false, inlineStylesheet, maskInputOptions),
+        serializeNodeWithId(n, n, idNodeMap, blockClass, false, inlineStylesheet, maskInputOptions, recordCanvas),
         idNodeMap,
     ];
 }
+function visitSnapshot(node, onVisit) {
+    function walk(current) {
+        onVisit(current);
+        if (current.type === exports.NodeType.Document ||
+            current.type === exports.NodeType.Element) {
+            current.childNodes.forEach(walk);
+        }
+    }
+    walk(node);
+}
 
@@ -868,3 +886,4 @@ var commentre = /\/\*[^*]*\*+([^/*][^*]*\*+)*\//g;
                 var value = n.attributes[name];
-                value = typeof value === 'boolean' ? '' : value;
+                value =
+                    typeof value === 'boolean' || typeof value === 'number' ? '' : value;
                 if (!name.startsWith('rr_')) {
@@ -894,3 +913,5 @@ var isTextarea = tagName === 'textarea' && name === 'value';
                         }
-                        else if (name == 'onload' || name == 'onclick' || name.substring(0, 7) == 'onmouse') {
+                        else if (name === 'onload' ||
+                            name === 'onclick' ||
+                            name.substring(0, 7) === 'onmouse') {
                             node_1.setAttribute('_' + name, value);
@@ -977,6 +998,42 @@ }
 }
-function rebuild(n, doc, HACK_CSS) {
+function visit(idNodeMap, onVisit) {
+    function walk(node) {
+        onVisit(node);
+    }
+    for (var key in idNodeMap) {
+        if (idNodeMap[key]) {
+            walk(idNodeMap[key]);
+        }
+    }
+}
+function handleScroll(node) {
+    var n = node.__sn;
+    if (n.type !== exports.NodeType.Element) {
+        return;
+    }
+    var el = node;
+    for (var name in n.attributes) {
+        if (!(n.attributes.hasOwnProperty(name) && name.startsWith('rr_'))) {
+            continue;
+        }
+        var value = n.attributes[name];
+        if (name === 'rr_scrollLeft') {
+            el.scrollLeft = value;
+        }
+        if (name === 'rr_scrollTop') {
+            el.scrollTop = value;
+        }
+    }
+}
+function rebuild(n, doc, onVisit, HACK_CSS) {
     if (HACK_CSS === void 0) { HACK_CSS = true; }
     var idNodeMap = {};
-    return [buildNodeWithSN(n, doc, idNodeMap, false, HACK_CSS), idNodeMap];
+    var node = buildNodeWithSN(n, doc, idNodeMap, false, HACK_CSS);
+    visit(idNodeMap, function (visitedNode) {
+        if (onVisit) {
+            onVisit(visitedNode);
+        }
+        handleScroll(visitedNode);
+    });
+    return [node, idNodeMap];
 }
@@ -990,1 +1047,2 @@
 exports.transformAttribute = transformAttribute;
+exports.visitSnapshot = visitSnapshot;

package.json

 {
   "name": "rrweb-snapshot",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "description": "rrweb's component to take a snapshot of DOM, aka DOM serializer",
@@ -5,0 +5,0 @@ "scripts": {

typings/index.d.ts

@@ -1,4 +0,4 @@
-import snapshot, { serializeNodeWithId, transformAttribute } from './snapshot';
+import snapshot, { serializeNodeWithId, transformAttribute, visitSnapshot } from './snapshot';
 import rebuild, { buildNodeWithSN, addHoverClass } from './rebuild';
 export * from './types';
-export { snapshot, serializeNodeWithId, rebuild, buildNodeWithSN, addHoverClass, transformAttribute, };
+export { snapshot, serializeNodeWithId, rebuild, buildNodeWithSN, addHoverClass, transformAttribute, visitSnapshot, };

typings/rebuild.d.ts

 import { serializedNodeWithId, idNodeMap, INode } from './types';
 export declare function addHoverClass(cssText: string): string;
 export declare function buildNodeWithSN(n: serializedNodeWithId, doc: Document, map: idNodeMap, skipChild?: boolean, HACK_CSS?: boolean): INode | null;
-declare function rebuild(n: serializedNodeWithId, doc: Document, HACK_CSS?: boolean): [Node | null, idNodeMap];
+declare function rebuild(n: serializedNodeWithId, doc: Document, onVisit?: (node: INode) => unknown, HACK_CSS?: boolean): [Node | null, idNodeMap];
 export default rebuild;

typings/snapshot.d.ts

@@ -5,4 +5,5 @@ import { serializedNodeWithId, INode, idNodeMap, MaskInputOptions } from './types';
 export declare function transformAttribute(doc: Document, name: string, value: string): string;
-export declare function serializeNodeWithId(n: Node | INode, doc: Document, map: idNodeMap, blockClass: string | RegExp, skipChild?: boolean, inlineStylesheet?: boolean, maskInputOptions?: MaskInputOptions): serializedNodeWithId | null;
-declare function snapshot(n: Document, blockClass: string | RegExp | undefined, inlineStylesheet: boolean | undefined, maskAllInputsOrOptions: boolean | MaskInputOptions): [serializedNodeWithId | null, idNodeMap];
+export declare function serializeNodeWithId(n: Node | INode, doc: Document, map: idNodeMap, blockClass: string | RegExp, skipChild?: boolean, inlineStylesheet?: boolean, maskInputOptions?: MaskInputOptions, recordCanvas?: boolean): serializedNodeWithId | null;
+declare function snapshot(n: Document, blockClass: string | RegExp | undefined, inlineStylesheet: boolean | undefined, maskAllInputsOrOptions: boolean | MaskInputOptions, recordCanvas?: boolean): [serializedNodeWithId | null, idNodeMap];
+export declare function visitSnapshot(node: serializedNodeWithId, onVisit: (node: serializedNodeWithId) => unknown): void;
 export default snapshot;

typings/types.d.ts

@@ -20,3 +20,3 @@ export declare enum NodeType {
 export declare type attributes = {
-    [key: string]: string | boolean;
+    [key: string]: string | number | boolean;
 };
@@ -23,0 +23,0 @@ export declare type elementNode = {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

256573

increased by5.07%

Lines of code

3361

increased by5.63%

No dependency changes