Merge pull request #40 from crperezt/byebyenpm

Grabs fiberRoot from root id of DOM

Author: crperezt

dev-reactime/linkFiber.js

@@ -65,7 +65,7 @@ export default (snap, mode) => {
 
     if (!snap.tree) {
       // console.log('snapshot empty, sending root');
-      snap.tree = new Tree('root');
+      snap.tree = new Tree('root', 'root');
     }
     const payload = snap.tree.cleanTreeCopy();// snap.tree.getCopy();
 
@@ -103,7 +103,7 @@ export default (snap, mode) => {
 
   // Carlos: This runs after EVERY Fiber commit. It creates a new snapshot,
   //
-  function createTree(currentFiber, tree = new Tree('root'), fromSibling = false) {
+  function createTree(currentFiber, tree = new Tree('root', 'root'), fromSibling = false) {
     // Base case: child or sibling pointed to null
     // console.log('linkFiber.js: creating tree');
     if (!currentFiber) return null;
@@ -223,21 +223,23 @@ export default (snap, mode) => {
   }
 
   return async () => {
-    // if (container._internalRoot) {
-    //   fiberRoot = container._internalRoot;
-    // } else {
-    //   const {
-    //     _reactRootContainer: { _internalRoot },
-    //     _reactRootContainer,
-    //   } = container;
-    //   // Only assign internal root if it actually exists
-    //   fiberRoot = _internalRoot || _reactRootContainer;
-    // }
+
+    const container = document.getElementById('root');
+    if (container._internalRoot) {
+      fiberRoot = container._internalRoot;
+    } else {
+      const {
+        _reactRootContainer: { _internalRoot },
+        _reactRootContainer,
+      } = container;
+      // Only assign internal root if it actually exists
+      fiberRoot = _internalRoot || _reactRootContainer;
+    }
 
     const devTools = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
     const reactInstance = devTools ? devTools.renderers.get(1) : null;
-    // console.log('devTools:', devTools);
 
+    //console.log('fiberRoot retrieved:', fiberRoot);
     if (reactInstance && reactInstance.version) {
       devTools.onCommitFiberRoot = (function (original) {
         return function (...args) {
@@ -249,13 +251,15 @@ export default (snap, mode) => {
       }(devTools.onCommitFiberRoot));
     }
     updateSnapShotTree();
+    sendSnapshot();
+    // updateSnapShotTree();
     // Send the initial snapshot once the content script has started up
     // This message is sent from contentScript.js in chrome extension bundles
-    window.addEventListener('message', ({ data: { action } }) => {
-      if (action === 'contentScriptStarted') {
-        // console.log('content script started received at linkFiber.js')
-        sendSnapshot();
-      }
-    });
+    // window.addEventListener('message', ({ data: { action } }) => {
+    //   if (action === 'contentScriptStarted') {
+    //     // console.log('content script started received at linkFiber.js')
+    //     sendSnapshot();
+    //   }
+    // });
   };
 };

src/extension/background.js

@@ -197,6 +197,7 @@ chrome.runtime.onMessage.addListener((request, sender) => {
     action === 'tabReload'
     || action === 'recordSnap'
     || action === 'jumpToSnap'
+    || action === 'injectScript'
   ) {
     isReactTimeTravel = true;
   } else return true;
@@ -215,8 +216,7 @@ chrome.runtime.onMessage.addListener((request, sender) => {
       break;
     }
     // this case causes d3 graph to display 1 instead of 0
-    case 'tabReload': {
-
+    case 'injectScript': {
       console.log('ran execute script to inject backend');
       chrome.tabs.executeScript(tabId, {
         code: `
@@ -231,7 +231,9 @@ chrome.runtime.onMessage.addListener((request, sender) => {
         injectScript(chrome.runtime.getURL('bundles/backend.bundle.js'), 'body');
       `,
       });
-
+      break;
+    }
+    case 'tabReload': {
       tabsObj[tabId].mode.locked = false;
       tabsObj[tabId].mode.paused = false;
       // dont remove snapshots if persisting

src/extension/contentScript.js

@@ -9,10 +9,9 @@ let firstMessage = true;
 window.addEventListener('message', msg => { // runs automatically every second
   // window listener picks up the message it sends, so we should filter
   // messages sent by contentscrip
-
-  if (msg.data.action !== 'contentScriptStarted' && firstMessage) {
-    // since contentScript is run everytime a page is refreshed
+  if (firstMessage) {
     // tell the background script that the tab has reloaded
+    console.log('event from window, now sending message to extension:', msg);
     chrome.runtime.sendMessage({ action: 'tabReload' });
     firstMessage = false;
   }
@@ -45,19 +44,4 @@ chrome.runtime.onMessage.addListener(request => { // seems to never fire
   return true; // attempt to fix port closing console error
 });
 
-
-
-
-// // inject script into DOM that grabs window
-// function injectScript(file, node) {
-//   const th = document.getElementsByTagName(node)[0];
-//   const s = document.createElement('script');
-//   s.setAttribute('type', 'text/javascript');
-//   s.setAttribute('src', file);
-//   th.appendChild(s);
-// }
-
-// // console.log('WINDOW in content script:', window);
-// reactimeBackend.default(devTools);
-
-//window.postMessage({ action: 'contentScriptStarted' });
+chrome.runtime.sendMessage({ action: 'injectScript' });