UNPKG

@xysfe/memento-snapshot

Version:

rrweb's component to take a snapshot of DOM, aka DOM serializer

3 lines (2 loc) 14.8 kB
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 l=0,u=s;l<u.length;l++){var c=u[l];"."!==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,o){switch(void 0===i&&(i={}),void 0===a&&(a=[]),void 0===o&&(o=!1),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 s=!1,l="";"string"==typeof r?s=e.classList.contains(r):e.classList&&e.classList.forEach&&e.classList.forEach(function(e){r.test(e)&&(s=!0)});var u=getValidTagName(e.tagName);if(!s)for(var c=0,f=a;c<f.length;c++){var m=f[c];if(u===m.tagName){s=!0,m.placeholder&&(l=m.placeholder);break}}for(var d={},p=0,h=Array.from(e.attributes);p<h.length;p++){var g=h[p],v=g.name,y=g.value;d[v]=transformAttribute(t,v,y);var T="img"===u&&"src"===v||"link"===u&&"href"===v,N=e.rel;!T||("dns-prefetch"===N||"preload"===N)||/^data:image/i.test(d[v])||(d["_memimage_"+v]=d[v])}var _=e.rel;if("link"===u&&!("dns-prefetch"===_||"preload"===_||"prefetch"===_)&&n){var E,b=Array.from(t.styleSheets).find(function(t){return t.href===e.href});(E=getCssRulesString(b))&&(delete d.rel,delete d.href,"_memimage_href"in d&&delete d._memimage_href,d._cssText=absoluteToStylesheet(E,b.href))}if("style"===u&&e.sheet&&!(e.innerText||e.textContent||"").trim().length)(E=getCssRulesString(e.sheet))&&(d._cssText=absoluteToStylesheet(E,location.href));if("input"===u||"textarea"===u||"select"===u){y=e.value;"radio"!==d.type&&"checkbox"!==d.type&&"submit"!==d.type&&"button"!==d.type&&y?d.value=i[d.type]||i[u]?"*".repeat(y.length):y:e.checked&&(d.checked=e.checked)}if("option"===u){var C=e.parentElement;d.value===C.value&&(d.selected=e.selected)}if("canvas"===u&&o&&(d.mem_dataURL=e.toDataURL()),e.scrollLeft&&(d.mem_scrollLeft=e.scrollLeft),e.scrollTop&&(d.mem_scrollTop=e.scrollTop),s){var S=e.getBoundingClientRect(),A=S.width,D=S.height;d.mem_width=A+"px",d.mem_height=D+"px",l&&(d.mem_placeholder=l)}return{type:NodeType.Element,tagName:u,attributes:d,childNodes:[],isSVG:isSVGElement(e)||void 0,needBlock:s};case e.TEXT_NODE:var x=e.parentNode&&e.parentNode.tagName,w=e.textContent,R="STYLE"===x||void 0;return R&&w&&(w=absoluteToStylesheet(w,location.href)),"SCRIPT"===x&&(w="SCRIPT_PLACEHOLDER"),{type:NodeType.Text,textContent:w||"",isStyle:R};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,l){void 0===i&&(i=!1),void 0===a&&(a=!0),void 0===s&&(s=[]),void 0===l&&(l=!1);var u,c=serializeNode(e,t,n,a,o,s,l);if(!c)return console.warn(e,"not serialized"),null;u="__sn"in e?e.__sn.id:genId();var f=Object.assign(c,{id:u});e.__sn=f,r[u]=e;var m=!i;if(f.type===NodeType.Element&&(m=m&&!f.needBlock,delete f.needBlock),(f.type===NodeType.Document||f.type===NodeType.Element)&&m)for(var d=0,p=Array.from(e.childNodes);d<p.length;d++){var h=serializeNodeWithId(p[d],t,r,n,i,a,o,s,l);h&&f.childNodes.push(h)}return f}function snapshot(e,t,r,n,i,a){void 0===t&&(t="mem-block"),void 0===r&&(r=!0),void 0===i&&(i=[]),void 0===a&&(a=!1);var o={};return[serializeNodeWithId(e,e,o,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),o]}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 l(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 u(){return m(/^{\s*/)}function c(){return m(/^}/)}function f(){var t,r=[];for(d(),p(r);e.length&&"}"!==e.charAt(0)&&(t=S()||A());)!1!==t&&(r.push(t),p(r));return r}function m(t){var r=t.exec(e);if(r){var n=r[0];return i(n),e=e.slice(n.length),r}}function d(){m(/^\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 l("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=m(/^([^{]+)/);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=m(/^(\*?[-#\/\*\\\w]+(\[[0-9a-z_-]+\])?)\s*/);if(t){var r=trim(t[0]);if(!m(/^:\s*/))return l("property missing ':'");var n=m(/^((?:'(?:\\'|.)*?'|"(?:\\"|.)*?"|\([^\)]*?\)|[^};])+)/),i=e({type:"declaration",property:r.replace(commentre,""),value:n?trim(n[0]).replace(commentre,""):""});return m(/^[;\s]*/),i}}function y(){var e,t=[];if(!u())return l("missing '{'");for(p(t);e=v();)!1!==e&&(t.push(e),p(t)),e=v();return c()?t:l("missing '}'")}function T(){for(var e,t=[],r=a();e=m(/^((\d+\.\d+|\.\d+|\d+)%?|[a-z]+)\s*/);)t.push(e[1]),m(/^,\s*/);if(t.length)return r({type:"keyframe",values:t,declarations:y()})}var N,_=C("import"),E=C("charset"),b=C("namespace");function C(e){var t=new RegExp("^@"+e+"\\s*([^;]+);");return function(){var r=a(),n=m(t);if(n){var i={type:e};return i[e]=n[1].trim(),r(i)}}}function S(){if("@"===e[0])return function(){var e=a(),t=m(/^@([-\w]+)?keyframes\s*/);if(t){var r=t[1];if(!(t=m(/^([-\w]+)\s*/)))return l("@keyframes missing name");var n,i=t[1];if(!u())return l("@keyframes missing '{'");for(var o=p();n=T();)o.push(n),o=o.concat(p());return c()?e({type:"keyframes",name:i,vendor:r,keyframes:o}):l("@keyframes missing '}'")}}()||function(){var e=a(),t=m(/^@media *([^{]+)/);if(t){var r=trim(t[1]);if(!u())return l("@media missing '{'");var n=p().concat(f());return c()?e({type:"media",media:r,rules:n}):l("@media missing '}'")}}()||function(){var e=a(),t=m(/^@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=m(/^@supports *([^{]+)/);if(t){var r=trim(t[1]);if(!u())return l("@supports missing '{'");var n=p().concat(f());return c()?e({type:"supports",supports:r,rules:n}):l("@supports missing '}'")}}()||_()||E()||b()||function(){var e=a(),t=m(/^@([-\w]+)?document *([^{]+)/);if(t){var r=trim(t[1]),n=trim(t[2]);if(!u())return l("@document missing '{'");var i=p().concat(f());return c()?e({type:"document",document:n,vendor:r,rules:i}):l("@document missing '}'")}}()||function(){var e=a();if(m(/^@page */)){var t=g()||[];if(!u())return l("@page missing '{'");for(var r,n=p();r=v();)n.push(r),n=n.concat(p());return c()?e({type:"page",selectors:t,declarations:n}):l("@page missing '}'")}}()||function(){var e=a();if(m(/^@host\s*/)){if(!u())return l("@host missing '{'");var t=p().concat(f());return c()?e({type:"host",rules:t}):l("@host missing '}'")}}()||function(){var e=a();if(m(/^@font-face\s*/)){if(!u())return l("@font-face missing '{'");for(var t,r=p();t=v();)r.push(t),r=r.concat(p());return c()?e({type:"font-face",declarations:r}):l("@font-face missing '}'")}}()}function A(){var e=a(),t=g();return t?(p(),e({type:"rule",selectors:t,declarations:y()})):l("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,WECHAT_DEVELOPER_INSET_BUG=/(\s|;|\{)inset\s*:([^;}]+)/gi;function addHoverClass(e){var t=parse(e,{silent:!0});return t.stylesheet&&t.stylesheet.rules?(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.replace(WECHAT_DEVELOPER_INSET_BUG,"$1top: $2; right: $2; bottom: $2; left: $2;")):e}var DATA_SVG_URI=/url\((data:image\/svg\+xml;charset=[\w-].*?)\)\s*(;|\}|$)/gi;function addQuotationMarkForDataSvg(e){return e?e.replace(DATA_SVG_URI,function(e,t,r){return'url("'+t+'")'+r}):e}function buildNode(e,t,r,n){switch(void 0===n&&(n=!0),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 i,a=getTagName(e);i=e.isSVG?t.createElementNS("http://www.w3.org/2000/svg",a):t.createElement(a);var o=function(o){if(!e.attributes.hasOwnProperty(o))return"continue";if(e.attributes.hasOwnProperty("_memimage_"+o))return"continue";var s=e.attributes[o];s="boolean"==typeof s||"number"==typeof s?"":s;var l=o;if((o=o.replace("_memimage_","")).startsWith("mem_")){if("canvas"===a&&"mem_dataURL"===o){var u=document.createElement("img");u.src=s,u.onload=function(){var e=i.getContext("2d");e&&e.drawImage(u,0,0,u.width,u.height)}}"mem_imgwidth"===o?i.style.width=s:"mem_width"===o?i.style.width=s:"mem_imgheight"===o?i.style.height=s:"mem_height"===o?i.style.height=s:"video"===a&&"mem_placeholder"===l&&(i.style.background="center / cover no-repeat url("+s+") !important")}else{var c="textarea"===a&&"value"===o,f="style"===a&&"_cssText"===o;if(f&&r&&(s=addQuotationMarkForDataSvg(s=addHoverClass(s))),c||f){for(var m=t.createTextNode(s),d=0,p=Array.from(i.childNodes);d<p.length;d++){var h=p[d];h.nodeType===i.TEXT_NODE&&i.removeChild(h)}return i.appendChild(m),"continue"}if("iframe"===a&&"src"===o)return"continue";try{e.isSVG&&"xlink:href"===o?i.setAttributeNS("http://www.w3.org/1999/xlink",o,s):"onload"===o||"onclick"===o||"onmouse"===o.substring(0,7)?i.setAttribute("_"+o,s):(n&&"link"===a&&"_memimage_href"===l&&s&&s.match(/memento\.oss/)&&(s=s.replace(/^http\:\/\//,"https://")),i.setAttribute(o,s))}catch(e){}}};for(var s in e.attributes)o(s);return i;case NodeType.Text:var l=e.isStyle?addQuotationMarkForDataSvg(e.textContent):e.textContent;return t.createTextNode(e.isStyle&&r?addHoverClass(l):l);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,a){void 0===n&&(n=!1),void 0===i&&(i=!0),void 0===a&&(a=!0);var o=buildNode(e,t,i,a);if(!o)return null;if(e.type===NodeType.Document&&(t.close(),t.open(),o=t),o.__sn=e,r[e.id]=o,(e.type===NodeType.Document||e.type===NodeType.Element)&&!n)for(var s=0,l=e.childNodes;s<l.length;s++){var u=l[s],c=buildNodeWithSN(u,t,r,!1,i,a);c?o.appendChild(c):console.warn("Failed to rebuild",u)}return o}function sideEffects(e){for(var t in e){var r=e[t],n=r.__sn;if(n.type===NodeType.Element){var i=r;for(var a in n.attributes)if(n.attributes.hasOwnProperty(a)&&a.startsWith("mem_")){var o=n.attributes[a];"mem_scrollLeft"===a&&(i.scrollLeft=o),"mem_scrollTop"===a&&(i.scrollTop=o)}}}}function rebuild(e,t,r,n){void 0===r&&(r=!0),void 0===n&&(n=!0);var i={},a=buildNodeWithSN(e,t,i,!1,r,n);return sideEffects(i),[a,i]}export{snapshot,serializeNodeWithId,rebuild,buildNodeWithSN,addHoverClass,transformAttribute,NodeType}; //# sourceMappingURL=memento-snapshot.min.js.map