Suport snapshots

mattzeunert · Jun 22, 2020 · 11d0075 · 11d0075
1 parent 0ccbd3a
commit 11d0075
Show file tree

Hide file tree

Showing 4 changed files with 542,116 additions and 3 deletions.
diff --git a/packages/backend/backend.ts b/packages/backend/backend.ts
@@ -451,6  451,116 @@ function setupUI(options, app, wss, getProxy, files, getRequestHandler) {
     }
   });
 
   /* capture snapshot with this code:
 
 function readElement(el) {
  let className = el.className
 
  function getNodes(el) {
    let nodes = []
     el.childNodes.forEach(node => {
         let isElement = node.nodeType === 1
         nodes.push({
           elOrigin: {...node.__elOrigin, contents: undefined},
           type: node.nodeType,
           tagName: node.tagName,
           isSVG: node instanceof SVGElement,
           nodes: isElement ? getNodes(node) : [],
           attributes: isElement ? node.getAttributeNames().map(attrName => ({ name: attrName, value: node.getAttribute(attrName) }))
  : [], textContent: isElement ? undefined : node.textContent
          })
     })
     return nodes
  }
  const nodes = getNodes(el)
 
  return {
      className, nodes
  }
 }
 Array.from(document.querySelectorAll("script")).forEach(script => script.remove());
 if (document.querySelector("#fromjs-inspect-dom-button")) {
     document.querySelector("#fromjs-inspect-dom-button").remove()
 }
 if (document.querySelector(".fromjs-inspector-container")) {
 document.querySelector(".fromjs-inspector-container").remove()    
 }
 
 var res= {
   body: readElement(document.body),
   head: readElement(document.head)
 }
 console.log(res)
 copy(JSON.stringify(res, null, 2))
 
   */
 
   app.get("/snapshot/lighthouse", async (req, res) => {
     const { code } = await (await getRequestHandler()).processCode(
       "console.log('Hello')",
       "http://nothing.com?asdfadsfsf",
       {}
     );
 
     res.end(`<!doctype html>
     <html>
       <head>
       </head>
       <body>
         <div>Loading snapshot...</div>
         <script>
         window.backendPort = 7000;
         </script>
         <script>
         ${code}
         </script>
         <script>
           function restoreEl(el, elData) {
             el.className = elData.className
 
             function addNodes(el, nodes) {
               for (const node of nodes) {
                 if (node.type === 1) {
                   let child
                   if (node.isSVG) {
                     child = document.createElementNS("http://www.w3.org/2000/svg", node.tagName)
                   } else {
                     child = document.createElement(node.tagName)
                   }
                   el.appendChild(child)
                   for (const attr of node.attributes) {
                     child.setAttribute(attr.name, attr.value)
                   }
                   child.__elOrigin = node.elOrigin
                   addNodes(child, node.nodes)
                 } else if (node.type === 3) {
                   let child = document.createTextNode(node.textContent)
                   child.__elOrigin = node.elOrigin
                   el.appendChild(child)
                 } else {
                   console.log("ignoring node type", node.type)
                 }
               }
             }
 
             addNodes(el, elData.nodes)
           }
 
           fetch("/snapshotData/lighthouse").then(r => r.json()).then(snapshotData => {
             restoreEl(document.head, snapshotData.head)
             restoreEl(document.body, snapshotData.body)
           })
         </script>
       </body>
     </html>`);
   });
 
   app.get("/snapshotData/lighthouse", (req, res) => {
     res.json(
       JSON.parse(fs.readFileSync("./snapshots/lighthouse.json", "utf-8"))
     );
   });
 
   app.get("/sessionInfo", (req, res) => {
     console.log("req to /sessionInfo");
     res.json({

diff --git a/packages/core/src/helperFunctions/helperFunctions.ts b/packages/core/src/helperFunctions/helperFunctions.ts
@@ -450,9  450,11 @@ global.fromJSInspect = function(value: any, charIndex: number) {
   if (window["onFromJSInspect"]) {
     window["onFromJSInspect"]();
   }
-  return postToBE("/inspect", {
-    logId
-  });
   if (logId) {
     return postToBE("/inspect", {
       logId
     });
   }
 };
 
 function getTrackingPropName(propName) {

diff --git a/packages/core/src/helperFunctions/initDomInspectionUI.ts b/packages/core/src/helperFunctions/initDomInspectionUI.ts
@@ -10,8  10,10 @@ export default function initDomInspectionUI(backendPort) {
   const toggleInspectDomButton = document.createElement("div");
   let selectedElement = null;
   const selectedElementMarker = document.createElement("div");
   selectedElementMarker.classList.add("fromjs-element-marker");
   let previewedElement = null;
   const previewedElementMarker = document.createElement("div");
   previewedElementMarker.classList.add("fromjs-element-marker");
 
   let waitForInitResolveFunction;
   const waitForInit = new Promise(