update readme for concurrent mode support

Author: prasmalla

package/astParser.js

@@ -31,13 +31,6 @@ module.exports = elementType => {
         }
       });
 
-      /* body will look something like:
-      [ 0: "_useState"
-        1: "_useState2"
-        2: "character"
-        3: "setCharacter" ]
-      */
-
       // Iterate array and determine getter/setters based on pattern
       statements.forEach((el, i) => {
         if (el.match(/_use/)) hookState[el] = statements[i + 2];

package/linkFiber.js

@@ -33,7 +33,7 @@ module.exports = (snap, mode) => {
     const oldSetState = component.setState.bind(component);
     // replace component's setState so developer doesn't change syntax
     // component.setState = newSetState.bind(component);
-    component.setState = (state, callback = () => { }) => {
+    component.setState = (state, callback = () => {}) => {
       // don't do anything if state is locked
       // UNLESS we are currently jumping through time
       if (mode.locked && !mode.jumping) return;
@@ -72,7 +72,8 @@ module.exports = (snap, mode) => {
     let index = 0;
     astHooks = Object.values(astHooks);
     // while memoizedState is truthy, save the value to the object
-    while (memoizedState && memoizedState.queue) { // prevents useEffect from crashing on load
+    while (memoizedState && memoizedState.queue) {
+      // prevents useEffect from crashing on load
       // if (memoizedState.next.queue === null) { // prevents double pushing snapshot updates
       changeUseState(memoizedState);
       // }
@@ -89,7 +90,6 @@ module.exports = (snap, mode) => {
   function createTree(currentFiber, tree = new Tree('root')) {
     if (!currentFiber) return tree;
 
-
     const {
       sibling,
       stateNode,
@@ -109,7 +109,10 @@ module.exports = (snap, mode) => {
     // Check if the component uses hooks
     // console.log("memoizedState", memoizedState);
 
-    if (memoizedState && Object.hasOwnProperty.call(memoizedState, 'baseState')) {
+    if (
+      memoizedState &&
+      Object.hasOwnProperty.call(memoizedState, 'baseState')
+    ) {
       // 'catch-all' for suspense elements (experimental)
       if (typeof elementType.$$typeof === 'symbol') return;
       // Traverse through the currentFiber and extract the getters/setters
@@ -157,7 +160,7 @@ module.exports = (snap, mode) => {
         _reactRootContainer: { _internalRoot },
         _reactRootContainer,
       } = container;
-      // only assign internal rootp if it actually exists
+      // only assign internal root if it actually exists
       fiberRoot = _internalRoot || _reactRootContainer;
     }
 

readme.md

@@ -10,6 +10,7 @@
 [![Dependencies](https://david-dm.org/oslabs-beta/reactime.svg)](https://david-dm.org/oslabs-beta/reactime#info=dependencies)
 [![DevDependencies](https://david-dm.org/oslabs-beta/reactime/dev-status.svg)](https://david-dm.org/oslabs-beta/reactime?type=dev)
 [![Vulnerabilities](https://snyk.io/test/github/oslabs-beta/reactime/badge.svg)](https://snyk.io/test/github/oslabs-beta/reactime)
+
 <p align="center">
 <a href="https://nodei.co/npm/reactime/"><img src="https://nodei.co/npm/reactime.png"></a>
 
@@ -18,7 +19,7 @@
 
 Reactime is a debugging tool for React developers. It records state whenever it is changed and allows the user to jump to any previously recorded state.
 
-This dev tool is for React apps using stateful components and prop drilling, and has beta support for Context API, conditional state routing, Hooks (useState, useEffect) and functional components. 
+This dev tool is for React apps using stateful components and prop drilling, and has beta support for Context API, conditional state routing, Hooks (useState, useEffect) and functional components.
 
 One thing to note is that this library does not work well when mixing React with direct DOM manipulation.
 
@@ -42,15 +43,25 @@ npm i reactime
 3. Call the library method on your root container after rendering your App.
 
 ```
-const reactime = require('reactime');
+import reactime from 'reactime';
 
 const rootContainer = document.getElementById('root');
 ReactDOM.render(<App />, rootContainer);
 
 reactime(rootContainer);
 ```
 
-4. Done! That's all you have to do to link your React project to our library.
+4. For experimental concurrent mode support:
+
+```
+import reactime from 'reactime';
+
+const rootContainer = ReactDOM.createRoot( document.getElementById('root'));
+rootContainer.render(<App />);
+reactime(rootContainer);
+```
+
+5. Done! That's all you have to do to link your React project to our library.
 
 ## How to Use
 
@@ -75,7 +86,7 @@ Jumping is the most important feature of all. It allows you to jump to any previ
 ### And Much More
 
 - multiple tree graph branches depicting state changes
-- tree graph hover functionality to view state changes 
+- tree graph hover functionality to view state changes
 - ability to pan and zoom tree graph
 - multiple tabs support
 - a slider to move through snapshots quickly

src/extension/background.js

@@ -8,7 +8,6 @@ const firstSnapshotReceived = {};
 // there will be the same number of objects in here as there are reactime tabs open for each user application being worked on
 const tabsObj = {};
 
-
 function createTabObj(title) {
   // update tabsObj
   return {
@@ -60,7 +59,6 @@ function changeCurrLocation(tabObj, rootNode, index) {
     return;
     // if not, recurse on each one of the children
   }
-  // added if (rootNode.children) { <=======
   if (rootNode.children) {
     rootNode.children.forEach(child => {
       changeCurrLocation(tabObj, child, index);
@@ -146,9 +144,9 @@ chrome.runtime.onMessage.addListener((request, sender) => {
 
   // Filter out tabs that don't have reactime
   if (
-    action === 'tabReload'
-    || action === 'recordSnap'
-    || action === 'jumpToSnap'
+    action === 'tabReload' ||
+    action === 'recordSnap' ||
+    action === 'jumpToSnap'
   ) {
     isReactTimeTravel = true;
   } else return;
@@ -181,10 +179,12 @@ chrome.runtime.onMessage.addListener((request, sender) => {
         tabsObj[tabId].index = 1;
 
         // send a message to devtools
-        portsArr.forEach(bg => bg.postMessage({
-          action: 'initialConnectSnapshots',
-          payload: tabsObj,
-        }));
+        portsArr.forEach(bg =>
+          bg.postMessage({
+            action: 'initialConnectSnapshots',
+            payload: tabsObj,
+          })
+        );
       }
       reloaded[tabId] = true;
       break;
@@ -199,13 +199,15 @@ chrome.runtime.onMessage.addListener((request, sender) => {
         tabsObj[tabId].snapshots.push(request.payload);
         sendToHierarchy(
           tabsObj[tabId],
-          new Node(request.payload, tabsObj[tabId]),
+          new Node(request.payload, tabsObj[tabId])
         );
         if (portsArr.length > 0) {
-          portsArr.forEach(bg => bg.postMessage({
-            action: 'initialConnectSnapshots',
-            payload: tabsObj,
-          }));
+          portsArr.forEach(bg =>
+            bg.postMessage({
+              action: 'initialConnectSnapshots',
+              payload: tabsObj,
+            })
+          );
         }
         break;
       }
@@ -218,16 +220,18 @@ chrome.runtime.onMessage.addListener((request, sender) => {
         //! INVOKING buildHierarchy FIGURE OUT WHAT TO PASS IN!!!!
         sendToHierarchy(
           tabsObj[tabId],
-          new Node(request.payload, tabsObj[tabId]),
+          new Node(request.payload, tabsObj[tabId])
         );
       }
       // send message to devtools
       if (portsArr.length > 0) {
-        portsArr.forEach(bg => bg.postMessage({
-          action: 'sendSnapshots',
-          payload: tabsObj,
-          sourceTab,
-        }));
+        portsArr.forEach(bg =>
+          bg.postMessage({
+            action: 'sendSnapshots',
+            payload: tabsObj,
+            sourceTab,
+          })
+        );
       }
       break;
     }
@@ -240,10 +244,12 @@ chrome.runtime.onMessage.addListener((request, sender) => {
 chrome.tabs.onRemoved.addListener(tabId => {
   // tell devtools which tab to delete
   if (portsArr.length > 0) {
-    portsArr.forEach(bg => bg.postMessage({
-      action: 'deleteTab',
-      payload: tabId,
-    }));
+    portsArr.forEach(bg =>
+      bg.postMessage({
+        action: 'deleteTab',
+        payload: tabId,
+      })
+    );
   }
 
   // delete the tab from the tabsObj