diff --git a/build/serve.mjs b/build/serve.mjs index 589262e..c5bbc8d 100644 --- a/build/serve.mjs +++ b/build/serve.mjs @@ -16,7 +16,7 @@ const ctx = await esbuild.context(settings); await ctx.watch(); const { port } = await ctx.serve({ - port: 5000, + port: 8000, servedir: 'www', fallback: 'index.html', }); diff --git a/dist/index.cjs.js b/dist/index.cjs.js index 12f40d5..741502e 100644 --- a/dist/index.cjs.js +++ b/dist/index.cjs.js @@ -1 +1 @@ -"use strict";var p=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var T=Object.getOwnPropertyNames;var y=Object.prototype.hasOwnProperty;var g=(n,e)=>{for(var s in e)p(n,s,{get:e[s],enumerable:!0})},f=(n,e,s,t)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of T(e))!y.call(n,r)&&r!==s&&p(n,r,{get:()=>e[r],enumerable:!(t=u(e,r))||t.enumerable});return n};var v=n=>f(p({},"__esModule",{value:!0}),n);var S={};g(S,{DataCollector:()=>d,PageBuilder:()=>l});module.exports=v(S);var E={onError:(n,e)=>{console.error(n,e)}},l=class{constructor(e=E){this.errorHandler=e}css=[];makePage(e){this.css=e.css;let s={},t=this.traverseTree(e.dom_tree,s),r=document.createDocumentFragment();if(!t)return this.errorHandler.onError("Unable to make page from tree root"),r;r.appendChild(t);let i=this.buildStyle(s);return this.appendStyle(r,i),r}appendStyle(e,s){let t=e.querySelector("head");t?t.appendChild(s):e.appendChild(s)}buildStyle(e){let s=document.createElement("style"),t="";return Object.keys(e||{}).forEach(r=>{t+=`[data-cs-${r}] {${e[parseInt(r)]}} `}),s.textContent=t.trimEnd(),s}traverseTree(e,s){return"tn"in e?this.parseElementNode(e,s):"t"in e?this.parseTextNode(e):(this.errorHandler.onError("NodeType: Unknown node type"),null)}parseElementNode(e,s){let t;try{t=document.createElement(e.tn||"")}catch(r){return this.errorHandler.onError(`Invalid Tag name: ${e.tn}`,r),null}return this.dataCsId(t,s,e.ci),this.setAttributes(t,e.a),this.setShadowDom(t,e.sr),this.appendChildren(t,s,e.c),t}parseTextNode(e){return document.createTextNode(e.t)}dataCsId(e,s,t){t!==void 0?(e.setAttribute("data-cs-0",""),e.setAttribute(`data-cs-${t.toString()}`,""),s[t]=this.css[t]):this.errorHandler.onError(`Invalid data-cs-id: "${t}"`)}setAttributes(e,s){(s||[]).forEach(t=>{try{e.setAttribute(t[0],t[1]||"")}catch(r){this.errorHandler.onError(`Invalid attribute name: ${t[0]}`,r)}})}setShadowDom(e,s){if(!s)return;let t;try{t=e.attachShadow({mode:"open"})}catch(o){this.errorHandler.onError("Shadowroot",o);return}let r={};this.appendChildren(t,r,s.c);let i=this.buildStyle(r);t.appendChild(i)}appendChildren(e,s,t){(t||[]).forEach(r=>{let i=this.traverseTree(r,s);i&&e.appendChild(i)})}};var m="4.1.1";var d=class{tree={};css=[];version;disallowedTagNames=["STYLE","SCRIPT","MONSIDO-EXTENSION"];monsidoIframeId="monsido-extension-iframe";defaultStyles;async collectData(e){let{width:s,height:t}=this.getViewPortSize(e);if(!s||!t)throw new Error("No viewport size found");this.setDefaultComputedStyles();let r=this.removeExtensionElements(e),i=this.cleanUpText(r.outerHTML);return this.tree=await this.processTree(e),{dom_tree:this.tree,css:this.css,html:i,version:this.version||m,viewport:{w:s,h:t}}}setVersion(e){this.version=e}removeExtensionElements(e){let s=e.cloneNode(!0);return[`IFRAME#${this.monsidoIframeId}`,this.disallowedTagNames[2]].forEach(r=>{let i=s.querySelectorAll(r);i&&i.forEach(o=>{o.remove()})}),s}processTree(e){return new Promise(async s=>{setTimeout(async()=>{let t={};if(e.nodeType!==11){t.tn=e.tagName.toUpperCase(),t.ci=this.processStyles(e),t.a=this.getAttributesList(e);let o=e.shadowRoot;o&&(t.sr=await this.processTree(o))}t.c=[];let r=Array.from(e.childNodes),i=r.length-1;if(!r.length&&!t.c.length)delete t.c,s(t);else for(let o=0;o`${t}:${r}`).join("")}removeDefaultStyles(e,s){let t={};for(let r of Object.keys(e))e[r]!==s[r]&&(t[r]=e[r]);return t}getAttributesList(e){return Array.from(e.attributes).map(r=>[r.nodeName,r.nodeValue||""])}cleanUpText(e){return e.replaceAll(/ +/g," ")}}; +"use strict";var p=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var T=Object.getOwnPropertyNames;var y=Object.prototype.hasOwnProperty;var g=(n,e)=>{for(var s in e)p(n,s,{get:e[s],enumerable:!0})},f=(n,e,s,t)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of T(e))!y.call(n,r)&&r!==s&&p(n,r,{get:()=>e[r],enumerable:!(t=u(e,r))||t.enumerable});return n};var v=n=>f(p({},"__esModule",{value:!0}),n);var S={};g(S,{DataCollector:()=>d,PageBuilder:()=>l});module.exports=v(S);var E={onError:(n,e)=>{console.error(n,e)}},l=class{constructor(e=E){this.errorHandler=e}css=[];makePage(e){this.css=e.css;let s={},t=this.traverseTree(e.dom_tree,s),r=document.createDocumentFragment();if(!t)return this.errorHandler.onError("Unable to make page from tree root"),r;r.appendChild(t);let i=this.buildStyle(s);return this.appendStyle(r,i),r}appendStyle(e,s){let t=e.querySelector("head");t?t.appendChild(s):e.appendChild(s)}buildStyle(e){let s=document.createElement("style"),t="";return Object.keys(e||{}).forEach(r=>{t+=`[data-cs-${r}] {${e[parseInt(r)]}} `}),s.textContent=t.trimEnd(),s}traverseTree(e,s){return"tn"in e?this.parseElementNode(e,s):"t"in e?this.parseTextNode(e):(this.errorHandler.onError("NodeType: Unknown node type"),null)}parseElementNode(e,s){let t;try{t=document.createElement(e.tn||"")}catch(r){return this.errorHandler.onError(`Invalid Tag name: ${e.tn}`,r),null}return this.dataCsId(t,s,e.ci),this.setAttributes(t,e.a),this.setShadowDom(t,e.sr),this.appendChildren(t,s,e.c),t}parseTextNode(e){return document.createTextNode(e.t)}dataCsId(e,s,t){t!==void 0?(e.setAttribute("data-cs-0",""),e.setAttribute(`data-cs-${t.toString()}`,""),s[t]=this.css[t]):this.errorHandler.onError(`Invalid data-cs-id: "${t}"`)}setAttributes(e,s){(s||[]).forEach(t=>{try{e.setAttribute(t[0],t[1]||"")}catch(r){this.errorHandler.onError(`Invalid attribute name: ${t[0]}`,r)}})}setShadowDom(e,s){if(!s)return;let t;try{t=e.attachShadow({mode:"open"})}catch(o){this.errorHandler.onError("Shadowroot",o);return}let r={};this.appendChildren(t,r,s.c);let i=this.buildStyle(r);t.appendChild(i)}appendChildren(e,s,t){(t||[]).forEach(r=>{let i=this.traverseTree(r,s);i&&e.appendChild(i)})}};var m="4.1.2";var d=class{tree={};css=[];version;disallowedTagNames=["STYLE","SCRIPT","MONSIDO-EXTENSION"];monsidoIframeId="monsido-extension-iframe";defaultStyles;async collectData(e){let{width:s,height:t}=this.getViewPortSize(e);if(!s||!t)throw new Error("No viewport size found");this.setDefaultComputedStyles();let r=this.removeExtensionElements(e),i=this.cleanUpText(r.outerHTML);return this.tree=await this.processTree(e),{dom_tree:this.tree,css:this.css,html:i,version:this.version||m,viewport:{w:s,h:t}}}setVersion(e){this.version=e}removeExtensionElements(e){let s=e.cloneNode(!0);return[`IFRAME#${this.monsidoIframeId}`,this.disallowedTagNames[2]].forEach(r=>{let i=s.querySelectorAll(r);i&&i.forEach(o=>{o.remove()})}),s}processTree(e){return new Promise(async s=>{setTimeout(async()=>{let t={};if(e.nodeType!==11){t.tn=e.tagName.toUpperCase(),t.ci=this.processStyles(e),t.a=this.getAttributesList(e);let o=e.shadowRoot;o&&(t.sr=await this.processTree(o))}t.c=[];let r=Array.from(e.childNodes),i=r.length-1;if(!r.length&&!t.c.length)delete t.c,s(t);else for(let o=0;o`${this.escapeQuotation(t)}:${this.escapeQuotation(r)}`).join("")}removeDefaultStyles(e,s){let t={};for(let r of Object.keys(e))e[r]!==s[r]&&(t[r]=e[r]);return t}getAttributesList(e){return Array.from(e.attributes).map(r=>[r.nodeName,r.nodeValue||""])}cleanUpText(e){return e.replaceAll(/ +/g," ")}escapeQuotation(e){return e.replaceAll(/"/g,'\\"')}}; diff --git a/dist/index.js b/dist/index.js index 79a9044..51bd8d4 100644 --- a/dist/index.js +++ b/dist/index.js @@ -1 +1 @@ -var h={onError:(a,e)=>{console.error(a,e)}},l=class{constructor(e=h){this.errorHandler=e}css=[];makePage(e){this.css=e.css;let s={},t=this.traverseTree(e.dom_tree,s),r=document.createDocumentFragment();if(!t)return this.errorHandler.onError("Unable to make page from tree root"),r;r.appendChild(t);let i=this.buildStyle(s);return this.appendStyle(r,i),r}appendStyle(e,s){let t=e.querySelector("head");t?t.appendChild(s):e.appendChild(s)}buildStyle(e){let s=document.createElement("style"),t="";return Object.keys(e||{}).forEach(r=>{t+=`[data-cs-${r}] {${e[parseInt(r)]}} `}),s.textContent=t.trimEnd(),s}traverseTree(e,s){return"tn"in e?this.parseElementNode(e,s):"t"in e?this.parseTextNode(e):(this.errorHandler.onError("NodeType: Unknown node type"),null)}parseElementNode(e,s){let t;try{t=document.createElement(e.tn||"")}catch(r){return this.errorHandler.onError(`Invalid Tag name: ${e.tn}`,r),null}return this.dataCsId(t,s,e.ci),this.setAttributes(t,e.a),this.setShadowDom(t,e.sr),this.appendChildren(t,s,e.c),t}parseTextNode(e){return document.createTextNode(e.t)}dataCsId(e,s,t){t!==void 0?(e.setAttribute("data-cs-0",""),e.setAttribute(`data-cs-${t.toString()}`,""),s[t]=this.css[t]):this.errorHandler.onError(`Invalid data-cs-id: "${t}"`)}setAttributes(e,s){(s||[]).forEach(t=>{try{e.setAttribute(t[0],t[1]||"")}catch(r){this.errorHandler.onError(`Invalid attribute name: ${t[0]}`,r)}})}setShadowDom(e,s){if(!s)return;let t;try{t=e.attachShadow({mode:"open"})}catch(n){this.errorHandler.onError("Shadowroot",n);return}let r={};this.appendChildren(t,r,s.c);let i=this.buildStyle(r);t.appendChild(i)}appendChildren(e,s,t){(t||[]).forEach(r=>{let i=this.traverseTree(r,s);i&&e.appendChild(i)})}};var c="4.1.1";var d=class{tree={};css=[];version;disallowedTagNames=["STYLE","SCRIPT","MONSIDO-EXTENSION"];monsidoIframeId="monsido-extension-iframe";defaultStyles;async collectData(e){let{width:s,height:t}=this.getViewPortSize(e);if(!s||!t)throw new Error("No viewport size found");this.setDefaultComputedStyles();let r=this.removeExtensionElements(e),i=this.cleanUpText(r.outerHTML);return this.tree=await this.processTree(e),{dom_tree:this.tree,css:this.css,html:i,version:this.version||c,viewport:{w:s,h:t}}}setVersion(e){this.version=e}removeExtensionElements(e){let s=e.cloneNode(!0);return[`IFRAME#${this.monsidoIframeId}`,this.disallowedTagNames[2]].forEach(r=>{let i=s.querySelectorAll(r);i&&i.forEach(n=>{n.remove()})}),s}processTree(e){return new Promise(async s=>{setTimeout(async()=>{let t={};if(e.nodeType!==11){t.tn=e.tagName.toUpperCase(),t.ci=this.processStyles(e),t.a=this.getAttributesList(e);let n=e.shadowRoot;n&&(t.sr=await this.processTree(n))}t.c=[];let r=Array.from(e.childNodes),i=r.length-1;if(!r.length&&!t.c.length)delete t.c,s(t);else for(let n=0;n`${t}:${r}`).join("")}removeDefaultStyles(e,s){let t={};for(let r of Object.keys(e))e[r]!==s[r]&&(t[r]=e[r]);return t}getAttributesList(e){return Array.from(e.attributes).map(r=>[r.nodeName,r.nodeValue||""])}cleanUpText(e){return e.replaceAll(/ +/g," ")}};export{d as DataCollector,l as PageBuilder}; +var h={onError:(a,e)=>{console.error(a,e)}},l=class{constructor(e=h){this.errorHandler=e}css=[];makePage(e){this.css=e.css;let s={},t=this.traverseTree(e.dom_tree,s),r=document.createDocumentFragment();if(!t)return this.errorHandler.onError("Unable to make page from tree root"),r;r.appendChild(t);let i=this.buildStyle(s);return this.appendStyle(r,i),r}appendStyle(e,s){let t=e.querySelector("head");t?t.appendChild(s):e.appendChild(s)}buildStyle(e){let s=document.createElement("style"),t="";return Object.keys(e||{}).forEach(r=>{t+=`[data-cs-${r}] {${e[parseInt(r)]}} `}),s.textContent=t.trimEnd(),s}traverseTree(e,s){return"tn"in e?this.parseElementNode(e,s):"t"in e?this.parseTextNode(e):(this.errorHandler.onError("NodeType: Unknown node type"),null)}parseElementNode(e,s){let t;try{t=document.createElement(e.tn||"")}catch(r){return this.errorHandler.onError(`Invalid Tag name: ${e.tn}`,r),null}return this.dataCsId(t,s,e.ci),this.setAttributes(t,e.a),this.setShadowDom(t,e.sr),this.appendChildren(t,s,e.c),t}parseTextNode(e){return document.createTextNode(e.t)}dataCsId(e,s,t){t!==void 0?(e.setAttribute("data-cs-0",""),e.setAttribute(`data-cs-${t.toString()}`,""),s[t]=this.css[t]):this.errorHandler.onError(`Invalid data-cs-id: "${t}"`)}setAttributes(e,s){(s||[]).forEach(t=>{try{e.setAttribute(t[0],t[1]||"")}catch(r){this.errorHandler.onError(`Invalid attribute name: ${t[0]}`,r)}})}setShadowDom(e,s){if(!s)return;let t;try{t=e.attachShadow({mode:"open"})}catch(n){this.errorHandler.onError("Shadowroot",n);return}let r={};this.appendChildren(t,r,s.c);let i=this.buildStyle(r);t.appendChild(i)}appendChildren(e,s,t){(t||[]).forEach(r=>{let i=this.traverseTree(r,s);i&&e.appendChild(i)})}};var c="4.1.2";var d=class{tree={};css=[];version;disallowedTagNames=["STYLE","SCRIPT","MONSIDO-EXTENSION"];monsidoIframeId="monsido-extension-iframe";defaultStyles;async collectData(e){let{width:s,height:t}=this.getViewPortSize(e);if(!s||!t)throw new Error("No viewport size found");this.setDefaultComputedStyles();let r=this.removeExtensionElements(e),i=this.cleanUpText(r.outerHTML);return this.tree=await this.processTree(e),{dom_tree:this.tree,css:this.css,html:i,version:this.version||c,viewport:{w:s,h:t}}}setVersion(e){this.version=e}removeExtensionElements(e){let s=e.cloneNode(!0);return[`IFRAME#${this.monsidoIframeId}`,this.disallowedTagNames[2]].forEach(r=>{let i=s.querySelectorAll(r);i&&i.forEach(n=>{n.remove()})}),s}processTree(e){return new Promise(async s=>{setTimeout(async()=>{let t={};if(e.nodeType!==11){t.tn=e.tagName.toUpperCase(),t.ci=this.processStyles(e),t.a=this.getAttributesList(e);let n=e.shadowRoot;n&&(t.sr=await this.processTree(n))}t.c=[];let r=Array.from(e.childNodes),i=r.length-1;if(!r.length&&!t.c.length)delete t.c,s(t);else for(let n=0;n`${this.escapeQuotation(t)}:${this.escapeQuotation(r)}`).join("")}removeDefaultStyles(e,s){let t={};for(let r of Object.keys(e))e[r]!==s[r]&&(t[r]=e[r]);return t}getAttributesList(e){return Array.from(e.attributes).map(r=>[r.nodeName,r.nodeValue||""])}cleanUpText(e){return e.replaceAll(/ +/g," ")}escapeQuotation(e){return e.replaceAll(/"/g,'\\"')}};export{d as DataCollector,l as PageBuilder}; diff --git a/dist/src/data-collector/data-collector.d.ts b/dist/src/data-collector/data-collector.d.ts index 40c7a5a..4cc6495 100644 --- a/dist/src/data-collector/data-collector.d.ts +++ b/dist/src/data-collector/data-collector.d.ts @@ -28,4 +28,5 @@ export declare class DataCollector { private removeDefaultStyles; private getAttributesList; private cleanUpText; + private escapeQuotation; } diff --git a/www/data-collector.html b/www/data-collector.html index 4d4a0bc..f5e8be5 100644 --- a/www/data-collector.html +++ b/www/data-collector.html @@ -34,7 +34,7 @@ } customElements.define('my-element', MyElement); -